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

Posted 2023-03-06

【中文标题】如何更改 FireFox 中悬停的 Select-Option 的颜色

【英文标题】：How to change the Color of the hovered Select-Option in FireFox

【发布时间】：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 特定的解决方案就足够了。

【问题讨论】：

看来你不能这样做看看***.com/questions/1667086/…

很遗憾，你做不到。

Change Select List Option background colour on 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 中最大的不一致之一。一些浏览器允许一些样式，但没有标准。见：***.com/questions/1072239/…