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

Question

我正在尝试在 Google Chrome 的 select 下拉菜单中设置 option 的样式。它适用于除 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

不幸的是，WebKit 浏览器不支持 <option> 的样式标签还没有，除了color和 background-color .

使用最广泛的跨浏览器解决方案是使用<ul>/<li>并使用 CSS 设计它们的样式。类似 Bootstrap 的框架做好这件事。