How to change color of Select box after option is selected

Question

I have tried a lot but can not do this. I want to show the red background colour to the selectbox after option is selected.

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<style type="text/css">
select:hover { 
    background:#Ff0000; 
    color : #ffffff;
}
</style>

Answer 1

Try this:

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = 'redText';
}

.redText {
    background-color:#F00;
}

<select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 2

You need to use javascript/jquery to handle change selection event for selectbox and add red background

Answer 3

HTML

<select>
    <option>Select</option>
    <option selected>im selected</option>
    <option>im not</option>
    <option>me too</option>
    <option>me either</option>
</select>

CSS

select { color: black; background: red; }
option:not(:checked) { background: white; }

http://jsfiddle.net/kQ6c5/

EDIT

http://www.w3.org/TR/selectors/#checked:

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Answer 4

Absolutely yes, you can do this using :checked selector,

Check this demo jsFiddle

Syntax

option:checked { }

HTML

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

CSS

option:checked { 
    background:#Ff0000; 
    color : #ffffff;
}