Question

我想更改FireFox中具有默认蓝色背景和白色前景的悬停Select-Option的颜色。

我试过了：

<select name="select" size="1">
   <option>0</option>
   <option class="test">1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>

.test:hover {
    color:green;
    background-color:yellow;
    text-decoration:underline;
}

但它不起作用。见Example。
FireFox特定的解决方案就足够了。

Answer 1

SELECT元素由OS呈现，而不是HTML。你无法设置这个元素的样式。

您可以使用JavaScript替换HTML + CSS来模拟SELECT。

Answer 2

单靠CSS无法完成。我建议<select>

替换jQuery + Chosen插件

Answer 3

我发现我可以将图像设置为背景。

jsfiddle demo

但它只是画上：悬停，当我从选项中退出鼠标时，系统会渲染它。

Answer 4

我认为您可能需要使用这样的CSS组合器：

select>option.test:hover
{
    color: #1B517E;
    cursor: pointer;
}

基本上你指的是这个：

父母＆gt;孩子们。 class：event

选择标签中的所有子项，其中“。test”类的选项将具有括号中指定的样式。

重要提示：它适用于Firefox，但不适用于Chrome。

以下参考资料可以帮助您：http://www.w3schools.com/css/css_combinators.asp

如何在FireFox中更改悬停的Select-Option的颜色

4 个答案: