Question

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

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; }，但没有用。有人知道怎么做吗？

Answer 1

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

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

此处，.decorated是分配给选择框的类。

希望你明白这一点。

Answer 2

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

Answer 3

通过这种方式，我们可以进行最少的更改：）

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

Answer 4

实现插入框阴影CSS适用于Firefox：

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

选中的选项在Chrome中有效：

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

Answer 5

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

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

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

Answer 6

在FF中，CSS过滤器工作正常。例如。色相旋转：

option {
    filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

Answer 7

我意识到这是一个较旧的问题，但我最近遇到了这种需求，并使用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;
}

也许这有助于其他人。

Answer 8

这就是你所需要的，儿童组合器：

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

尝试一下，效果很好。

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

在悬停时更改选择列表选项背景颜色

8 个答案: