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

Question

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

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

是否有一些技巧可以让 Edge 改变颜色，或者是浏览器的限制？

还有一个问题。我还尝试更改所选选项的颜色，尽管 option:checked 有效，但当下拉列表首次打开时，它显示为灰色，并且只有将鼠标移到选项列表上，样式才会生效。

Answer 1

<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 中的结果：

Answer 2

我没有答案，但是在复选框中我也发生了同样的事情，您是否找到了解决此问题的方法，如果是，请告诉我:)。

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2