How do I change the highlighting color of <select>
that is the color that highlights <li>
while cursor passes over it by using CSS?
-
I'm not sure that "highlight" is as descriptive as this question implies based on the accepted answer. – Mike Kormendy Oct 16 '14 at 19:57
-
possible duplicate of [Change Select List Option background colour on hover](http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) – doppelgreener May 01 '15 at 07:02
5 Answers
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.

- 70,219
- 68
- 205
- 290
-
16For folks just finding this answer, please note that it is 6 years old and no longer works in any browser. – inorganik Oct 01 '15 at 22:53
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;
}

- 49
- 1
- 3
-
I will have to try this to create a custom select using only HTML/CSS. ^^ – Darkosphere Feb 22 '23 at 00:02
As mentioned above, setting background-color
will work however :hover
is buggy in IE7 - setting your doctype to strict will help.

- 224,678
- 48
- 389
- 349

- 1,422
- 1
- 13
- 13
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
-
1check your page hits, IE6 may not matter. We're getting less than 5% of our users in IE6 at this point. – Russell Steen Nov 03 '09 at 12:43