Question

我想在关闭下拉菜单时将自定义样式仅放在可见项目上，而不是下拉列表中的项目。

为此，我将自定义样式放在select上，然后在option上撤消它们。例如，我在font-style: italic元素上设置了select。但是webkit浏览器和IE10似乎忽略了字体样式的覆盖。

HTML

<select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
</select>

CSS

select {
    color: red;
    font-style: italic;
}
option {
    color: black; // undos color:red
    font-style: normal!important; // This should undo the italic font style.
}

jsFiddle

为什么这些浏览器会忽略字体样式覆盖，即使使用!important？我该如何解决这个问题？

Answer 1

选择框在所有浏览器上都具有非常差的CSS样式支持。

要完全控制选择框样式，您必须使用javascript解决方案将选择框替换为可以设置样式的内容。 http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/是一个选项，或者你可能最好看一下jQuery插件或Bootstrap。

Answer 2

我通过Google发现，选项元素实际上是由操作系统设计的，因此无法通过CSS设置样式（没有JavaScript黑客等）。

CSS - 无法覆盖Dropdown中的字体样式

2 个答案: