[html] Change Select List Option background colour on hover

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?

This question is related to html css drop-down-menu

The answer is


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.


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.


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


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.


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

There is test on https://codepen.io/egle/pen/zzOKLe

For me this is working on Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)

Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/


This way we can do this with minimal changes :)

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


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

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

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


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


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width How to implement drop down list in flutter? How can I create a dropdown menu from a List in Tkinter? How can I close a dropdown on click outside? Making a drop down list using swift? HTML: Select multiple as dropdown How to get selected value of a dropdown menu in ReactJS Avoid dropdown menu close on click inside Bootstrap 3 dropdown select How to make a drop down list in yii2? Android custom dropdown/popup menu