带有 optgroups 的样式化选择标签在 Firefox 40 中看起来不同答案

【问题标题】：Styled Select Tags with optgroups look different in Firefox 40带有 optgroups 的样式化选择标签在 Firefox 40 中看起来不同
【发布时间】：2015-08-31 08:34:51
【问题描述】：

如果您在选择标签上具有全局字体系列样式，则 Firefox 40 版将在它们内部有或没有 optgroup 的情况下呈现不同的样式。在旧版本中，外观相似。

我创建了一个fiddle 来演示效果。只需在 FF40 和旧版本中尝试此演示。

<style type="text/css">
    select { font-family: Arial,Helvetica,sans-serif; }
</style>

<select>
    <optgroup label="Group1">
        <option value="1">Option 1 Group 1</option>
        <option value="2">Option 2 Group 1</option>
    </optgroup>
    <optgroup label="Group2">
        <option value="3">Option 3 Group 2</option>
        <option value="4">Option 4 Group 2</option>
    </optgroup>
</select>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

似乎新版本在使用 optgroups 渲染选择时具有不同的字体系列优先级。

这是一个错误吗？或者有人知道解决方法吗？

【问题讨论】：

标签： css firefox select

【解决方案1】：

您是否尝试过使用通配符选择器？

* {
font-family: Arial,Helvetica,sans-serif;
}

【讨论】：

这行得通，但也许我不想为任何标签设置样式。所以我只是在我的样式中包含了 optgroup 和 option，现在样式与旧版本中的样式相同。 select, optgroup, option { font-family: Arial,Helvetica,sans-serif; }

【解决方案2】：

Firefox 使用 :before 伪类来设置 optgroup 标签的样式

optgroup:before {
    content: attr(label);
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
}

【讨论】：