Change Select List Option background colour on hov

问题:

Is it possible to change the default background color of a select list option on hover?

HTML:

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

I have tried option:hover { background-color: red; }, but it is of no use. Does anybody know how to do this?

回答1:

This can be done by implementing an inset box shadow. eg:

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

Here, .decorated is a class assigned to the select box.

Hope you got the point.

回答2:

Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.

回答3:

Implementing an inset box shadow CSS works on Firefox:

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

Checked option item works in Chrome:

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

回答4:

The problem is that even JavaScript does not see the option element being hovered. This is just to put emphasis on how it\'s not going to be solved (any time soon at least) by using just CSS:

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

The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you\'re trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element.

回答5:

In FF also CSS filter works fine. E.g. hue-rotate:

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

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

回答6:

I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:

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

and the css:

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

Perhaps this helps someone else.

回答7:

this is what you need, the child combinator:

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

Try it, works perfect.

Here\'s the reference: http://www.w3schools.com/css/css_combinators.asp