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?
You cannot change the style for these elements.
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements. to set the whole select element to background color 009966 and color FFF . Then we override the the styles in the option elements with style="background: white; color: black;" .
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.
Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With