Html 悬停时更改选择列表选项背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10484053/
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
Change Select List Option background colour on hover
提问by Gopesh
Is it possible to change the default background color of a select list option on hover?
是否可以在悬停时更改选择列表选项的默认背景颜色？
HTML:
HTML：
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I have tried option:hover { background-color: red; }, but it is of no use. Does anybody know how to do this?
我试过了 option:hover { background-color: red; }，但没有用。有人知道怎么做这个吗？
回答by user2964504
This can be done by implementing an inset box shadow. eg:
这可以通过实现插入框阴影来完成。例如：
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
Here, .decoratedis a class assigned to the select box.
这里，.decorated是分配给选择框的类。
Hope you got the point.
希望你明白了。
回答by Priyesh
Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
Select / Option 元素由操作系统呈现，而不是 HTML。您无法更改这些元素的样式。
回答by Style Hack
This way we can do this with minimal changes :)
这样我们就可以用最少的更改来做到这一点:)
<html>
<head>
<style>
option:hover{background-color:yellow;}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;'
onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>回答by Egle Kreivyte
Implementing an inset box shadow CSS works on Firefox:
在 Firefox 上实现插入框阴影 CSS：
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in Chrome:
选中的选项在 Chrome 中有效：
select:focus > option:checked {
background: #000 !important;
}
There is test on https://codepen.io/egle/pen/zzOKLe
在https://codepen.io/egle/pen/zzOKLe上有测试
For me this is working on Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)
对我来说，这适用于 Google Chrome 版本 76.0.3809.100（官方版本）（64 位）
Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
我在 Chris Coyier 上找到的有关此问题的最新文章（2019 年 10 月 28 日）https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
回答by John
The problem is that even JavaScript does notsee the optionelement being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:
问题是，即使JavaScript并没有看到option正在徘徊的元素。这只是为了强调仅使用 CSS 不会解决它（至少在任何时候）：
window.onmouseover = function(e)
{
console.log(e.target.nodeName);
}
The onlyway to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the selectelement with a ulelement and the use of a radioinputelement per lielement.
解决此问题的唯一方法（除了等待浏览器供应商修复错误一千年，更不用说影响您尝试做的事情的错误）是使用 JavaScript 将下拉菜单替换为您自己的 HTML/XML。这可能涉及使用select元素替换ul元素以及radioinput每个li元素使用一个元素。
回答by mat3e
In FF also CSS filter works fine. E.g. hue-rotate:
在 FF 中，CSS 过滤器也能正常工作。例如色调旋转：
option {
filter: hue-rotate(90deg);
}
回答by Toasterdroid
I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:
我意识到这是一个较老的问题，但我最近遇到了这个需求，并使用 jQuery 和 CSS 提出了以下解决方案：
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
and the css:
和CSS：
.highlight {
background-color:#333;
cursor:pointer;
}
Perhaps this helps someone else.
也许这对其他人有帮助。
回答by Dani
this is what you need, the child combinator:
这就是你需要的，子组合器：
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
Try it, works perfect.
试试看，完美运行。
Here's the reference: http://www.w3schools.com/css/css_combinators.asp
