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