如何为SELECT标记的选项元素设置样式？

Question

如何为SELECT标记的选项元素设置样式？

我试着设置一个option在.select下拉菜单在谷歌Chrome。除了IE9和Chrome之外，它可以在所有浏览器中工作。

option.red {

    background-color: #cc0000; 

    font-weight: bold; 

    font-size: 12px; 

    color: white;

}

<select name="color">

    <option class="red" value="red">Red</option>

    <option value="white">White</option>

    <option value="blue">Blue</option>

    <option value="green">Green</option>

</select>

在不使用JavaScript的情况下，是否有办法为GoogleChrome中的选项设置样式？一旦选中，背景色就不会显示。

Answer 1

不幸的是，Webkit浏览器不支持<option>标签，除了color和background-color.使用最广泛的跨浏览器解决方案是使用<ul>&nbsp;/&nbsp;<li>并使用CSS对它们进行样式设计。类似的框架自举把这个做好。

Answer 2

自版本49+以来，Chrome一直支持样式设计<option>元素font-weight..资料来源：https：/code.google.com/p/chrom/ems/Details？id=44917#c22新的选择弹出：字体重量样式应该应用。此CL移除它们-ChromiumSkia.css。|!important|在它中被阻止申请font-weight..现在html.css已经|font-weight:normal|，和|!important|应该是不必要的。有一个Chrome样式表，emeChromiumSkia.css，它使用font-weight: normal !important;一直在里面。它是在49.0版中引入稳定的Chrome通道的。