更改 <select> 突出显示颜色答案

【问题标题】：Changing <select> highlight color更改 <select> 突出显示颜色
【发布时间】：2010-12-12 15:09:06
【问题描述】：

如何使用 CSS 更改 <select> 的突出显示颜色，即在光标经过 <li> 时突出显示的颜色？

【问题讨论】：

我不确定“highlight”是否像这个问题所暗示的那样具有描述性。
Change Select List Option background colour on hover 的可能重复项

【解决方案1】：

不知道“突出显示<li> 的颜色”是什么意思，但听起来您想更改<option> 元素的背景颜色。我试过了，还是不行，你总是得到系统颜色。

如果您想在鼠标悬停时突出显示整个 <select> 元素，这有点工作：

select:hover { background-color: red; }

但是在不同的浏览器中行为是不同的。例如，Chrome 不会突出显示下拉菜单中的选项； Firefox 可以，但是如果您将鼠标移开并且它们仍然被拉下，它不会将它们改回来。

正如在许多类似问题中所述，您无法可靠地设置表单控件的样式。 See here 了解更多详情。

【讨论】：

对于刚刚找到这个答案的人，请注意它已经 6 岁了，不再适用于任何浏览器。

【解决方案2】：

您不能通过类似 -> background:#f9f9f9

的方式更改选项的突出显示颜色

你可以这样做：

            select > option:hover{
                box-shadow: 0 0 10px 100px #FED20F inset;
                transition: all .2s ease-in-out;
            }

【讨论】：

【解决方案3】：

如上所述，设置 background-color 会起作用，但 :hover 在 IE7 中存在问题 - 将文档类型设置为严格会有所帮助。

【讨论】：

IE 总是有问题，不管是哪个版本！！

【解决方案4】：

你可以使用 :hover 伪类

例如

.classOfElementToColor:hover {background-color:red; color:black}

适用于大多数浏览器，但不适用于 IE6 中的所有元素

【讨论】：

检查您的页面点击量，IE6 可能无关紧要。目前，我们在 IE6 中获得的用户不到 5%。

【解决方案5】：

只需使用这个 CSS 选择器：

select option:hover {
    background-color: yellow;
}

【讨论】：