Change color of selected option only

Question

I have a selector sitting in a table cell. The table row has a color, so using CSS I can change the drop-down's background to the same color by using background-color:inherit; However, it changes the color of the entire box with all options.

Is it possible to change the color of the selected option only, if not with CSS perhaps with a help of jQuery?

Can you show us your html and css? Fyi... styling select boxes is terribly difficult! — Jason Gennaro, Oct 12 '11 at 14:32
Probably not, no; browsers seem to have limited access to the styling of `select` elements. — David Thomas, Oct 12 '11 at 14:33

score 10 · Accepted Answer · answered Oct 12 '11 at 14:45

10

Everything is possible with jQuery :) You should try this:

$('.mySelect').change(function () {
    $(this).find('option').css('background-color', 'transparent');
    $(this).find('option:selected').css('background-color', 'red');
}).trigger('change');

And here is a live demo

Hope that helps!

answered Oct 12 '11 at 14:45

Kristoffer Lundberg

876
4
16

Ronn's answer takes into account the selected item when inactive and when clicked on and expanded. – Ohiovr Dec 01 '17 at 13:02

score 4 · Answer 2 · edited May 01 '12 at 03:43

I was able to do it by first setting the background color of the SELECT element to what I wanted resulting in all options being that color. Then I made all the options a specific color scheme. Finally I made the selected option the same color scheme as the SELECT element so the option shows the same color in the drop down list.

$.each($('select'), function(i,v) {

    theElement = $(v);
    theID = theElement.attr('id');

    // Set the SELECT input element to green background with white text

    theElement.css('background-color', 'green');
    theElement.css('color', 'white');

    // Set all the options to another color (note transparant will show the green)

    $('#'+theID).find('option').css('background-color', 'white');
    $('#'+theID).find('option').css('color', 'black');

    // Finally set the selected option to the same values as the SELECT element

    $('#'+theID).find('option:selected').css('background-color', 'green');
    $('#'+theID).find('option:selected').css('color', 'white');
});

the answer was up there since Oct 12 2011! Besides, it was accepted. — Ozzy, Apr 30 '12 at 18:42

score 3 · Answer 3 · edited Oct 12 '11 at 15:33

3

You should be able to do this with jQuery. I may be wrong (see David Thomas' comment), but try:

$("option[value='myValue']").css('background-color', 'red');

edited Oct 12 '11 at 15:33

thirtydot

224,678
48
389
349

answered Oct 12 '11 at 14:36

jtfairbank

2,311
2
21
33

Change color of selected option only

3 Answers3

Linked