如何设置选择标签的选项元素的样式？

Question

我正在尝试在Google Chrome option中的select下拉菜单中设置a的样式.它适用于除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,有没有办法为Google Chrome中的选项设置样式？选择后,不显示背景颜色.

Answer 1

遗憾的是,<option>除了color和之外,WebKit浏览器还不支持标签样式background-color.

使用最广泛的跨浏览器的解决方案是使用<ul>/ <li>使用CSS样式.像Bootstrap这样的框架做得很好.

Answer 2

这是一个选择(从浏览器开发人员或W3C,我找不到任何关于样式选择选项的W3C规范),不允许选择样式选项.

我怀疑这是为了与原生选择列表保持一致.
(例如考虑移动设备).

我想到了3种解决方案:

• 使用Select2实际上将你的选择转换为uls(允许很多东西)
• 将您的selects 拆分为多个,以便对值进行分组
• 分成 optgroup