Changer la couleur de l'option sélectionnée seulement

Question

J'ai un sélecteur dans une cellule de table. La ligne du tableau a une couleur, donc en utilisant CSS, je peux changer l'arrière-plan de la liste déroulante à la même couleur en utilisant background-color:inherit; Cependant, il change la couleur de la boîte entière avec toutes les options.

Est-il possible de changer la couleur de l'option sélectionnée seulement, sinon avec CSS peut-être avec l'aide de jQuery?

Answer 1

Tout est possible avec jQuery :) Vous devriez essayer ceci:

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

Et voici un live demo

Espérons que ça aide!

Answer 2

Vous devriez être capable de le faire avec jQuery. Je peux me tromper (voir le commentaire de David Thomas), mais essayez:

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

Answer 3

J'ai été capable de le faire en réglant d'abord la couleur d'arrière-plan de l'élément SELECT sur ce que je voulais, ce qui a eu pour résultat que toutes les options étaient de cette couleur. Ensuite, j'ai fait toutes les options d'un schéma de couleurs spécifiques. Enfin, j'ai fait de l'option sélectionnée la même couleur que l'élément SELECT, de sorte que l'option affiche la même couleur dans la liste déroulante.

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