Firefox 选择下拉菜单不继承页面字体

Question

我在网页上遇到的一个问题是，在 Firefox（且仅限 Firefox）上，<select>标签内的选项不受font-family: inherit. s<option>应该继承<body>其父级指定的字体系列的指定字体系列。

相反，他们使用用户的 Firefox 配置文件中指定的字体。因此，如果用户的 Firefox 设置将默认字体类型设置为“Serif”，则下拉菜单看起来很糟糕。select 元素本身会正确继承页面字体，但下拉列表中的选项不会，如下所示：

它们应该与选择中的第一个选项具有相同的字体。

有什么办法可以制作它们吗？我试图指定一个 CSS 规则来让它们强制继承字体，但它没有做任何事情：

option {
    font-family: inherit;
}

强制使用字体是可行的，但这不一定是我想要的。

有没有办法在不编辑 DOM 或不使用 JS 的情况下做到这一点，或者这对于 Firefox 来说是不可能的？

Answer 1

这对我来说很有效。

select, option {
  font: -moz-pull-down-menu;
}