Change Select List Option background colour on hover in html [duplicate]

Question

Is it possible to change the default background color of the 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> 

select {     -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; }  select:hover {         background-color:gren; }  option:hover {     background-color:yellow; }  option {     -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;     color:blue;     background-color:yellow; } 

I have tried option :hover{background-color:red;}, but it is of no use. Does anybody know how to do this?

Answer 1

Currently there is no way to apply a css to get your desired result . Why not use libraries like choosen or select2 . These allow you to style the way you want.

If you don want to use third party libraries then you can make a simple un-ordered list and play with some css.Here is thread you could follow

How to convert <select> dropdown into an unordered list using jquery?