Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Select List Option background colour on hover

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?

like image 892
Gopesh Avatar asked May 07 '12 14:05

Gopesh


People also ask

Is it possible to change the default background color of a select list option on hover?

You cannot change the style for these elements.

How do I change the background color on a selected option?

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;" .


2 Answers

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.

like image 101
user2964504 Avatar answered Oct 16 '22 17:10

user2964504


Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.

like image 22
Priyesh Avatar answered Oct 16 '22 18:10

Priyesh