How to hange background Color of Selected Option in a Select Box

Question

What i need to do is to change blue color when i mouseover each option.

Here is HTML code,

<select id="color" class="colorchange">
    <option class="one" value="one" >one</option>
    <option class="two"   value="two" >two</option>
    <option class="three" value="three" >three</option>
</select>

I am really welcome if anyone help me in CSS solution..

Like `option {background-color: xxx;}` in css? see [jsfiddle](https://jsfiddle.net/sovkr8yj/) — fuyushimoya, Jul 09 '15 at 12:07
Thanks, I need to change blue color when i mouseover each option.. — Prasanga, Jul 09 '15 at 12:09
@Prasanga So why not asking question regarding your expected behaviour??? — A. Wolff, Jul 09 '15 at 12:10
@Paulie_D AFAIK, this cannot be done in a cross browser way, webkit browser doesn't support mouse event on `option` element — A. Wolff, Jul 09 '15 at 12:27

kieranpotts · Answer 1 · 2015-07-09T12:19:43.517

-1

Simply:

option:hover { background-color: yellow; }

edited Jul 09 '15 at 12:19

answered Jul 09 '15 at 12:08

kieranpotts

1,510
11
8

Oh yeah. Sorry. Answer corrected. – kieranpotts Jul 09 '15 at 12:19
1

Can you demo this working? – Paulie_D Jul 09 '15 at 12:21

How to hange background Color of Selected Option in a Select Box

1 Answers1