Gop*_*esh 50 html css drop-down-menu
是否可以在悬停时更改选择列表选项的默认背景颜色？
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; },但没用.有人知道怎么做这个吗？
小智 34
这可以通过实现插入框阴影来完成.例如:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
这.decorated是分配给选择框的类.
希望你明白这一点.
小智 14
这样我们就可以用最少的更改来做到这一点:)
<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>问题是即使 JavaScript 也看不到option悬停的元素。这只是为了强调仅使用 CSS 无法解决这个问题（至少在短期内）：
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}
解决此问题的唯一方法（除了等待浏览器供应商修复错误数千年之外，更不用说影响您正在尝试做的事情的错误）是使用 JavaScript 将下拉菜单替换为您自己的 HTML/XML。这可能涉及使用select元素替换元素以及每个元素ul使用一个元素。radio inputli
在火狐浏览器上实现嵌入框阴影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上有测试
对我来说，这适用于Google Chrome版本76.0.3809.100（正式版本）（64位）
我发现的最新文章是Chris Coyier（2019年10月28日）https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
| 归档时间： |
|
| 查看次数： |
157788 次 |
| 最近记录： |