如何更改 <select> 的 <optgroup> 标签的样式？

Question

我的应用程序中有一个带有选项组的简单选择框。

 <select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
   ----
   ----
   ----
</select>

当它在浏览器中显示时，选项组标签以粗体和斜体显示；我希望它在没有任何这些样式的情况下显示。

原文由 Gnanz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，选择框是少数可以使用 CSS 添加非常少的样式的东西之一。您通常受限于浏览器如何呈现它。

例如，在 chrome 中它看起来像这样：

这在 Firefox 中：

原文由 wesbos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在大多数浏览器上（在最新的 IE 和 FF 上测试过），您可以仅使用 CSS 轻松更改 optgroup 的标签：

     select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

显然，您可以设置任何类名而不是 select html 标记。

顺便说一下，正如其他答案所说，仍然有很少的 CSS 选项可用于选择框，许多网站管理员使用 user949847 提供的方法覆盖它们。但是上面的这段代码应该足以满足您的需求。

原文由 Helrik 发布，翻译遵循 CC BY-SA 3.0 许可协议