Changing <select> highlight color

How do I change the highlighting color of <select> that is the color that highlights <li> while cursor passes over it by using CSS?

Solution 1:

No idea what you mean about "the color that highlights <li>", but it sounds like you want to change the background colour of <option> elements. I tried it and it doesn't work, you always get the system color.

If you wanted to highlight the entire <select> element on mouseover, this kinda works:

select:hover { background-color: red; }

However the behaviour is different in different browsers. For example, Chrome doesn't highlight the options in the drop down; Firefox does, but then it doesn't change them back if you move the mouse away and they are still pulled down.

As has been stated on many, many similar questions, you can't reliably style form controls. See here for more details.

Solution 2:

You can't change the highlight color of the options through something like -> background:#f9f9f9

You can do something like this:

            select > option:hover{
                box-shadow: 0 0 10px 100px #FED20F inset;
                transition: all .2s ease-in-out;
            }