Change list color Hover background color selection

Question

Can I change the default background color for a hover list option?

HTML:

<select id="select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> 

I tried option:hover { background-color: red; } option:hover { background-color: red; } , but it is useless. Does anyone know how to do this?

Answer 1

This can be done by implementing the insert shadow. eg:

 select.decorated option:hover { box-shadow: 0 0 10px 100px #1882A8 inset; } 

Here .decorated is the class assigned in the select box.

I hope you understand.

Answer 2

Select / Option elements are displayed by the operating system, not HTML. You cannot change the style for these elements.

Answer 3

CSS insertion shadow implementation works on Firefox:

 select option:checked, select option:hover { box-shadow: 0 0 10px 100px #000 inset; } 

The checked option element works in Chrome:

 select:focus > option:checked { background: #000 !important; } 

Answer 4

In FF, the CSS filter works fine. For example. Shade of rotation:

 option { filter: hue-rotate(90deg); } 

https://jsfiddle.net/w3a740jq/4/

Answer 5

I understand this is an old question, but I recently ran into this problem and came up with the following solution using jQuery and CSS:

 jQuery('select[name*="lstDestinations"] option').hover( function() { jQuery(this).addClass('highlight'); }, function() { jQuery(this).removeClass('highlight'); } ); 

and css:

 .highlight { background-color:#333; cursor:pointer; } 

Perhaps this helps someone else.

Answer 6

this is what you need, child combinator:

  select>option:hover { color: #1B517E; cursor: pointer; } 

Try it, it works great.

Here's the link: http://www.w3schools.com/css/css_combinators.asp