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?

Answer 1

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!