是否可以在悬停时更改选择列表选项的默认背景颜色？
HTML：
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
我试过option:hover { background-color: red; }，但是没有用。有人知道怎么做吗？
【问题讨论】：
标签： html css drop-down-menu
您可以这样做，只要知道它将更改整个 html 中的所有选择输入，它不会更改蓝色悬停，但会设置其他所有内容的样式。
option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}
// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
【讨论】：
问题在于，即使是 JavaScript没有 看到 option 元素被悬停。这只是为了强调仅使用 CSS 不会（至少很快）解决它：
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}
唯一解决此问题的方法（除了等待浏览器供应商修复错误数千年，更不用说困扰您正在尝试做的事情）是替换下拉菜单使用 JavaScript 使用您自己的 HTML/XML。这可能涉及使用ul 元素替换select 元素以及每个li 元素使用radio input 元素。
【讨论】：
这样我们可以用最少的改变做到这一点:)
<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>【讨论】：
在 Firefox 上实现插入框阴影 CSS 工作：
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
选中的选项在 Chrome 中有效：
select:focus > option:checked {
background: #000 !important;
}
https://codepen.io/egle/pen/zzOKLe有测试
对我来说，这是可行的 谷歌浏览器 版本 76.0.3809.100（正式版）（64 位）
我发现的关于此问题的最新文章 Chris Coyier（2019 年 10 月 28 日）https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
【讨论】：
这可以通过实现插入框阴影来完成。 例如：
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
这里，.decorated 是分配给选择框的类。
希望你明白了。
【讨论】：
option:checked 比option:hover 效果更好。不过，两者似乎都只适用于 Firefox。
我意识到这是一个较老的问题，但我最近遇到了这种需求，并使用 jQuery 和 CSS 提出了以下解决方案：
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
和css：
.highlight {
background-color:#333;
cursor:pointer;
}
也许这对其他人有帮助。
【讨论】：
option:hover。但不完全是：如果我在鼠标悬停在某个选项上时开始使用键盘，您的脚本会中断，因此它并不可靠。
这是你需要的，子组合器：
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
试一试，效果很好。
【讨论】：
option:checked { background-color: -moz-html-cellhighlight !important; color: -moz-html-cellhighlighttext !important; }。然后，问题是您无法覆盖内部重要属性，即使您使用 !important。
Select / Option 元素由操作系统呈现，而不是 HTML。您无法更改这些元素的样式。
【讨论】：