您可以更改 Microsoft Edge 中 :hover 上 select 选项的背景颜色吗？

Question

我一直在尝试更改鼠标悬停时 select 下拉菜单的选项元素的背景颜色，但我无法在 Microsoft Edge 中使用它，悬停始终显示为灰色。它在 Chrome 和 Firefox 中工作得很好，并且 :hover 在 Edge 中的其他元素上工作，但我无法 option:hover 更改背景颜色。

此外，如果 select 设置为多个，则悬停有效，但如果处于下拉模式则无效。

是不是有什么技巧可以让Edge改变颜色，还是浏览器的限制？

另一个问题。我也在尝试更改 selected 选项的颜色，虽然 option:checked 有效，但当下拉列表首次打开时它显示为灰色并且样式在我将鼠标移到上方之前不会生效选项列表。

Answer 1

<option> 元素由您的 OS 呈现，并且只有少数样式属性可以应用于它。详细信息可以参考this thread.

如你所说如果select设置为多个，悬停有效，我们可以使用将<select>更改为多个的方式我们 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>

如果在 selecting 时不想将 <select> 更改为多个，则只能使用 <ul> <li> 之类的样式编写自己的 <select>他们，或使用一些插件，如 bootstrap-select。对于您提到的其他问题，也可以通过创建自己的 <ul> <li> select 或使用插件来解决。

可以参考我的bootstrap-select示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/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中的结果：

您可以更改 Microsoft Edge 中 :hover 上 select 选项的背景颜色吗？

Can you change the background color of a select option on :hover in Microsoft Edge?

css

hover

microsoft-edge

html-select

background-color