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?
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?
No, it's not possible.
It's really, if not use native selects, if you create custom select widget from html elements, t.e. "li".
Source: Stackoverflow.com