30

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?

Krishna Kumar
  • 2,101
  • 1
  • 23
  • 34
srihari
  • 917
  • 4
  • 14
  • 26

2 Answers2

21

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?

Community
  • 1
  • 1
Kiran Ruth R
  • 902
  • 1
  • 11
  • 28
4

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

maximkou
  • 5,252
  • 1
  • 20
  • 41