Changing <select> highlight color

Question

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

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

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

Answer 3

As mentioned above, setting background-color will work however :hover is buggy in IE7 - setting your doctype to strict will help.

Answer 4

You can use the :hover pseudo class

eg

.classOfElementToColor:hover {background-color:red; color:black}

Works with most browsers, but not on all elements in IE6

Answer 5

Simply use this CSS selector:

select option:hover {
    background-color: yellow;
}