Change Select List Option background colour on hover
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.
This way we can do this with minimal changes :)
<html>
<head>
<style>
option:hover {
background-color: yellow;
}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Implementing an inset box shadow CSS works on Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in Chrome:
select:focus > option:checked {
background: #000 !important;
}
There is test on https://codepen.io/egle/pen/zzOKLe
For me this is working on Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)
Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/