Cambiar el color de la opción seleccionada solo

Question

Tengo un selector sentado en una celda de la tabla. La fila de la tabla tiene un color, por lo que con CSS puedo cambiar el fondo del menú desplegable al mismo color usando background-color:inherit; Sin embargo, cambia el color de todo el cuadro con todas las opciones.

¿Es posible cambiar el color de la opción seleccionada solamente, si no con CSS quizás con la ayuda de jQuery?

Answer 1

Todo es posible con jQuery :) Usted debe intentar esto:

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

Y aquí es un live demo

Espero que ayude!

Answer 2

Debería poder hacer esto con jQuery. Puedo estar equivocado (ver comentario de David Thomas'), pero trate:

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

Answer 3

Pude hacerlo estableciendo primero el color de fondo del elemento SELECCIONAR en lo que quería, dando como resultado que todas las opciones tuvieran ese color. Luego hice de todas las opciones un esquema de color específico. Finalmente hice que la opción seleccionada tuviera el mismo esquema de color que el elemento SELECT, por lo que la opción muestra el mismo color en la lista desplegable.

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