CSS: Style the selected of select list

Question

I have a select list:

<select multiple="multiple">
<option value="1">Macrostructures</option>
<option value="2">Woven</option>
<option value="3">Mystic Bird</option>
</select>

Now when somepody selects an option the option has a blue background. I know want to change the background color.

I already tried:

select option:checked { background: #787878; }

But this doesn't work. How is the correct selector?

Regards

It is duplicate of below http://stackoverflow.com/questions/2402146/html-select-selected-option-background-color-css-style Thanks, — ravi, May 21 '12 at 11:40

score 1 · Answer 1 · answered May 21 '12 at 12:22

1

check this

$('select').change(function() {
$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');
}).change();

answered May 21 '12 at 12:22

Asaithambi Perumal

71
9

ahem, you may want to point out that this is jQuery, given the user didn't tag the question with jQuery or javascript. – Faust May 21 '12 at 12:25
Is there really no css way? Apart from that thank you for a solution. – bodokaiser May 21 '12 at 17:18

CSS: Style the selected of select list

1 Answers1