84

是否可以在悬停时更改选择列表选项的默认背景颜色？

HTML：

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

我试过 option:hover { background-color: red; }了，但没有用。有人知道怎么做这个吗？

4

8 回答 8

45

这可以通过实现插入框阴影来完成。例如：

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

这里，.decorated是分配给选择框的类。

希望你明白了。

于 2013-11-07T11:19:06.890 回答
32

Select / Option 元素由操作系统呈现，而不是 HTML。您无法更改这些元素的样式。

于 2013-03-26T01:25:15.817 回答
16

这样我们就可以通过最小的更改来做到这一点:)

<html>

<head>
  <style>
    option:hover {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <select onfocus='this.size=10;' 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>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

</body>

</html>

于 2020-02-05T10:25:12.323 回答
11

在 Firefox 上实现插入框阴影 CSS 工作：

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

选中的选项在 Chrome 中有效：

select:focus > option:checked { 
    background: #000 !important;
}

在https://codepen.io/egle/pen/zzOKLe上有测试

对我来说，这适用于 Google Chrome 版本 76.0.3809.100（官方版本）（64 位）

我发现的关于此问题的最新文章 Chris Coyier（2019 年 10 月 28 日）https://css-tricks.com/the-current-state-of-styling-selects-in-2019/

于 2015-10-20T09:38:05.910 回答
7

问题是即使 JavaScript 也看不到option悬停的元素。这只是为了强调仅使用 CSS 不会（至少很快）解决它：

window.onmouseover = function(event)
{
 console.log(event.target.nodeName);
}

解决此问题的唯一方法（除了等待浏览器供应商修复错误数千年之外，更不用说影响您尝试做的事情了）是使用 JavaScript 将下拉菜单替换为您自己的 HTML/XML。这可能涉及使用元素替换select元素以及每个元素ul使用一个元素。radio inputli

于 2018-01-22T05:48:58.290 回答
0

您可以这样做，只要知道它将更改整个 html 中的所有选择输入，它不会更改蓝色悬停，但会设置其他所有内容的样式。

option {
  background: #1b1a1a !important;
  color: #357b1d !important;
}
select {
  background: #1b1a1a !important;
  color: #357b1d !important;
}

// If you also want to theme your text inputs:
input {
  background: #1b1a1a !important;
  color: #357b1d !important;
}
于 2021-11-10T18:16:12.700 回答
-5

我意识到这是一个较老的问题，但我最近遇到了这种需求，并使用 jQuery 和 CSS 提出了以下解决方案：

jQuery('select[name*="lstDestinations"] option').hover(
        function() {
            jQuery(this).addClass('highlight');
        }, function() {
            jQuery(this).removeClass('highlight');
        }
    );

和CSS：

.highlight {
    background-color:#333;
    cursor:pointer;
}

也许这对其他人有帮助。

于 2014-12-24T15:56:59.390 回答
-10

这就是你需要的，子组合器：

    select>option:hover
    {
        color: #1B517E;
        cursor: pointer;
    }

试试看，效果很好。

这是参考：http ://www.w3schools.com/css/css_combinators.asp

于 2014-04-08T02:03:36.640 回答