How can I change color of a select option with CSS on hover?

Question

<select style="width:245px;">
    <option value="rseleccionar">Seleccione..</option>
    <option value="bs">Bienes Separados</option>
    <option value="bm">Bienes Mancomunados</option>
</select>

I want to change the blue color of default for another.

possible duplicate of [CSS image hover change color of text](http://stackoverflow.com/questions/8971133/css-image-hover-change-color-of-text) — Machavity, Sep 28 '15 at 23:07
I don't want to change text color... Just the color about mouseover in the select — Hector, Sep 28 '15 at 23:15
So you want the option background color needs to be change when the user mouse over is that correct — Mr.M, Sep 29 '15 at 08:02
Take a look at this: http://stackoverflow.com/a/17742187/5374294 — Orry, Sep 29 '15 at 08:15

score 2 · Answer 1 · answered Sep 29 '15 at 07:54

Styling select and option tag is very limited.

This is because the way they are displayed may change according to the browser/the OS. Think about what happens when you click a select tag on your phone. You don't get a dropdown list as expected on a desktop browser. So you couldnt style something universal as it doesn't natively display the save everywhere.

Styling possibilities are: mainly on the select tag but very restricted on the option. You could for example disable the native style of the select box:

select {
    appearance: none;
    /* may need vendors prefixes. */
}

Other solution is: jQuery plugins that simulate select box using other HTML tags:

https://jqueryui.com/selectmenu/
https://github.com/marcj/jquery-selectBox
And all that Google may return you with keywords "jQuery select box" :)

Mr.M · Answer 2 · 2015-09-29T09:32:52.480

1

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

edited Sep 29 '15 at 09:32

answered Sep 29 '15 at 08:12

Mr.M

1,472
3
29
76

True for `option` but `select` can be styled. – Sebastien Sep 29 '15 at 08:46

score 1 · Answer 3 · answered Sep 29 '15 at 13:10

Try this, hope it'll work

<select class="hover_color" style="width:245px;">
   <option value="rseleccionar">Seleccione..</option>
   <option value="bs">Bienes Separados</option>
   <option value="bm">Bienes Mancomunados</option>
</select>

.hover_color:hover { background-color: red; border:1px solid red }

How can I change color of a select option with CSS on hover?

3 Answers3

Linked