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

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

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

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

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

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

css hover microsoft-edge html-select background-color
2个回答
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 中的结果:


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.