css - 下拉选择中的样式文本选项

Question

我只是想将一些基本样式应用于下拉选择元素中的不同选项。在 Firefox 中，样式有效，但在 Chrome 和 IE9 中，样式不生效，即使在 Chrome 中我可以在调试检查器中看到样式正在被读取并且没有被任何其他样式覆盖。有什么想法吗？

例如这条规则:

select option.depth-0 {
    font-weight: bold;
}

关于这个元素:

<option value="1" class="depth-0">Home</option>

Answer 1

在你的 css 中交换 select 和 option 选择器:

option.depth-0 select{
    font-weight: bold;
}

编辑

Option select 元素实际上不是浏览器的一部分。它是操作系统的一部分。很难设计风格。

例如，您不能更改 select 元素中某些 option 的 height。更改 font-weight 也是假设的。

我看到的唯一选择是创建您自己的自定义 select 元素。例如使用 JavaScript。然后您可以根据需要使用 CSS 自定义它。它将是跨浏览器的。