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

【问题标题】：How to change the Color of the hovered Select-Option in FireFox如何更改 FireFox 中悬停的 Select-Option 的颜色
【发布时间】：2011-10-25 01:08:38
【问题描述】：

我想更改 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 特定的解决方案就足够了。

【问题讨论】：

看来你不能这样做看看stackoverflow.com/questions/1667086/…
很遗憾，你做不到。
Change Select List Option background colour on hover的可能重复

标签： html css drop-down-menu hover

【解决方案1】：

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

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

基本上你是在指定这个：

父>子。类：事件

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

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

这里有一个可以帮助你的参考：http://www.w3schools.com/css/css_combinators.asp

【讨论】：

【解决方案2】：

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

jsfiddle demo

但它只在 :hover 上绘制，当我从选项中退出鼠标时，它将由系统呈现。

【讨论】：

【解决方案3】：

仅靠 CSS 是无法做到的。我推荐 jQuery + Chosen 插件替换 <select>

【讨论】：

问题是：<select> 是由 GWT 生成的，我不能为这个问题使用更多的库。
嗯，好的，您可能想将该信息添加到问题中：-)

【解决方案4】：

SELECT 元素由操作系统呈现，而不是 HTML。您无法设置此元素的样式。

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

【讨论】：

为什么text-decoration:underline; 有效？全局选择颜色更改也适用于选项。
+1 相同的想法，而且比我快。我正在搜索我的书签以找到插件链接！
SEELCT 可能是 CSS 中最大的不一致之一。一些浏览器允许一些样式，但没有标准。见：stackoverflow.com/questions/1072239/…