我一直在尝试更改鼠标悬停时选择下拉菜单的选项元素的背景颜色,但无法使其在 Microsoft Edge 中工作,悬停始终显示为灰色。它在 Chrome 和 Firefox 中工作得很好,并且 :hover 在 Edge 中的其他元素上工作,但我无法获得选项:hover 来更改背景颜色。
此外,如果选择设置为多个,则悬停有效,但如果处于下拉模式则无效。
是否有一些技巧可以让 Edge 改变颜色,或者是浏览器的限制?
还有一个问题。我还尝试更改所选选项的颜色,尽管 option:checked 有效,但当下拉列表首次打开时,它显示为灰色,并且只有将鼠标移到选项列表上,样式才会生效。
<option>
元素由您的操作系统呈现,并且只有少数样式属性可以应用于它。详细信息可以参考这个帖子。
正如您所说,如果选择设置为多个,则悬停有效,我们可以使用在选择时将
<select>
更改为多个的方式作为解决方法。您可以参考以下示例:
option:hover {
background-color: yellow;
}
<select name="cars" id="cars" onfocus='this.size=4;' 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>
</select>
如果您不想在选择时将
<select>
更改为多个,则只能使用<select>
之类的东西编写自己的<ul> <li>
,然后对其进行样式设置,或者使用一些插件,例如bootstrap-select。对于您提到的其他问题,也可以通过创建自己的<ul> <li>
选择或使用插件来解决。
你可以参考我的bootstrap-select示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<style>
/*hover color*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
color: #ffffff;
background-color: #f3969a;
}
/*checked color*/
.dropdown-item.active {
background-color: #33e2ea;
}
</style>
</head>
<body>
<select id="txtTitle" class="form-control selectpicker">
<option selected value="default">Please Select</option>
<option value="Session">Session</option>
<option value="Class">Class</option>
</select>
</body>
</html>
Edge/Chrome 中的结果:
我没有答案,但是在复选框中我也发生了同样的事情,您是否找到了解决此问题的方法,如果是,请告诉我:)。