文章/答案/技术大牛

发布

社区首页 >问答首页 >能否更改“在Microsoft中悬停”选项的背景色？

问能否更改“在Microsoft中悬停”选项的背景色？
EN

Stack Overflow用户

提问于 2021-08-02 18:18:55

回答 1查看 5.7K关注 0票数 1

我一直试图更改鼠标悬停的选择下拉菜单中选项元素的背景色，但我无法使其在Microsoft中工作，悬停始终显示为灰色。它在Chrome和Firefox中运行得非常好，而且:悬浮可以在Edge中的其他元素上运行，但我无法选择:悬停来更改背景色。

此外，如果select设置为multiple，则悬停运行，但如果处于下拉模式，则无效。

是否有什么技巧可以让边缘改变颜色，还是它是浏览器的限制？

另一个问题。我还试图更改所选选项的颜色，虽然选项:checked有效，但当下拉列表第一次打开时，它显示为灰色，直到我将鼠标移到选项列表上，样式才会生效。

hover

microsoft-edge

html-select

background-color

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-03 09:12:56

<option>元素是由您的操作系统呈现的，只有几个样式属性可以应用到它。有关详细信息，您可以参考这条线。

正如您所说的，如果select被设置为multiple，悬停就能工作，当我们选择作为解决方案时，我们可以使用将<select>更改为multiple的方式。您可以参考以下示例：

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>更改为多个，则只能使用类似于<ul> <li>的东西编写自己的<select>，然后对它们进行样式化，或者使用一些插件(如引导-选择 )。对于您提到的另一个问题，也可以通过创建自己的<ul> <li>选择或使用插件来解决。

您可以参考我的引导选择示例：

<!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>

结果在边缘/Chrome：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68626310

复制

相似问题

问能否更改“在Microsoft中悬停”选项的背景色？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问能否更改“在Microsoft中悬停”选项的背景色？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问能否更改“在Microsoft中悬停”选项的背景色？
EN