Change the color of only the selected option

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 background to the same color with background-color:inherit;However, it changes the color of the whole window with all the parameters.

Is it possible to change the color of only the selected parameter, if not using CSS, possibly using jQuery?

Answer 1

Anything is possible with jQuery :) You should try the following:

$('.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 demonstration

Hope this helps!

Answer 2

, SELECT , , . . , , SELECT, .

$.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');
});

Answer 3

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

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