如何为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> / <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通道的。