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

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 2

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 3

Simply use this CSS selector:

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

Answer 4

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