Html 更改 <select> 高亮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1667086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing <select> highlight color
提问by ArK
How do I change the highlighting color of <select>that is the color that highlights <li>while cursor passes over it by using CSS?
如何使用 CSS更改光标经过时<select>突出显示的颜色<li>？
采纳答案by DisgruntledGoat
No idea what you mean about "the color that highlights <li>", but it sounds like you want to change the background colour of <option>elements. I tried it and it doesn't work, you always get the system color.
不知道“突出显示的颜色”是什么意思<li>，但听起来您想更改<option>元素的背景颜色。我试过了，它不起作用，你总是得到系统颜色。
If you wanted to highlight the entire <select>element on mouseover, this kinda works:
如果你想<select>在鼠标悬停时突出显示整个元素，这有点工作：
select:hover { background-color: red; }
However the behaviour is different in different browsers. For example, Chrome doesn't highlight the options in the drop down; Firefox does, but then it doesn't change them back if you move the mouse away and they are still pulled down.
然而，行为在不同的浏览器中是不同的。例如，Chrome 不会突出显示下拉列表中的选项；Firefox 可以，但是如果您将鼠标移开并且它们仍然被拉下，它不会将它们更改回来。
As has been stated on many, many similar questions, you can't reliably style form controls. See herefor more details.
正如在许多类似问题上所述，您无法可靠地设置表单控件的样式。请参阅此处了解更多详情。
回答by Cosmin
You can't change the highlight color of the options through something like -> background:#f9f9f9
您无法通过诸如 -> 之类的方式更改选项的突出显示颜色 background:#f9f9f9
You can do something like this:
你可以这样做：
select > option:hover{
box-shadow: 0 0 10px 100px #FED20F inset;
transition: all .2s ease-in-out;
}
回答by George Wiscombe
As mentioned above, setting background-colorwill work however :hoveris buggy in IE7 - setting your doctype to strict will help.
如上所述，设置background-color将起作用，但是:hover在 IE7 中存在问题 - 将您的 doctype 设置为严格会有所帮助。
回答by Paul
You can use the :hover pseudo class
您可以使用 :hover 伪类
eg
例如
.classOfElementToColor:hover {background-color:red; color:black}
Works with most browsers, but not on all elements in IE6
适用于大多数浏览器，但不适用于 IE6 中的所有元素
回答by Lastnico
Simply use this CSS selector:
只需使用这个 CSS 选择器：
select option:hover {
background-color: yellow;
}
