悬停时如何更改选项标记的背景色

Question

当我在没有JS的情况下悬停在选项元素上时，有没有办法改变它的背景？

我的意思是一个简单的选择与选项。

option:hover {
background-color: yellow;
}

<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

我尝试了所有可用的选项。但如果没有Javascript，我就找不到解决方案。

Answer 1

几乎任何浏览器都不支持您所要求的内容。人们经常使用从无序列表中构建选择的库，但最好的解决方案是回到设计师那里，询问需求的必要性。许多库的可访问性法规遵从性很差，而且它们总是增加一层复杂性来维护。

Answer 2

答案是否。目前，在CSS3中对此没有任何支持。也许在下一个版本中，会有。

然而，还有其他选择。。。

第一种选择是使用Bootstrap 5制作自定义下拉菜单。

另一种选择是这样的：

.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu li:nth-child(1) > a:hover {
background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="wrapper">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Volvo</a></li>
<li><a class="dropdown-item" href="#">Saab</a></li>
<li><a class="dropdown-item" href="#">VW</a></li>
<li><a class="dropdown-item" href="#">Audi</a></li>
</ul>
</div>
</div>

使用select的唯一已知方法(限制(

浏览器兼容性：

铬：✓

Firefox：✓

Safari：☓

这种替代方法是更改option的默认视图，并且可以使用onfocus事件属性来更改它们。例如，您可以使用<select onfocus="this.size=4;" onblur="this.size=0;" onchange="this.size=1; .this.blur();">

此focus event实质上更改了选项的默认样式。使用CCD_ 6，您可以指定CCD_；onchange="this.size=1;"使其在选择选项后返回默认值。this:blur();允许其在选择选项并再次打开select之后保持相同的onfocus效果。

点击此处查看该版本：

option[value="volvo"]:hover {
background-color: pink;
}
option[value="saab"]:hover {
background-color: blue;
}
option[value="vw"]:hover {
background-color: green;
}
option[value="audi"]:hover {
background-color: yellow;
}
/* removes default scroll when using this.size */
select {
overflow: hidden;
}

<select onfocus="this.size=4;" onchange="this.size=1; this.blur();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">Opel</option>
<option value="audi">Audi</option>
</select>