Modification de la couleur d'une liste déroulante lorsqu'elle est fermée

Question

Avec CSS, je peux définir les couleurs de police et d'arrière-plan pour les options individuelles d'une liste déroulante "select"; Cependant, ces couleurs n'apparaissent que dans la liste déroulante. Les couleurs affichées dans la boîte sur la page lorsque la liste n'est pas ouverte sont toujours les valeurs par défaut.

Actuellement, j'ai une liste avec beaucoup de boîtes déroulantes ayant quelques options, et il serait utile de pouvoir colorier chaque option afin que la sélection soit immédiatement évidente. La conversion en boutons radio ou autre entrée n'est pas vraiment réalisable. (Mes clients sont assez pointilleux :-p.)

Answer 1

IE obtient le droit si c'est une consolation;)

Vous aurez besoin d'un peu de JavaScript pour que cela fonctionne dans d'autres navigateurs:

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
    <option style="background-color:yellow">Item 1</option> 
    <option style="background-color:lightyellow">Item 2</option> 
</select> 

encore mieux avec des noms de classe CSS:

<select 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="important"> 
    <option class="important" selected="selected">Item 1</option> 
    <option class="sorta-important">Item 2</option> 
</select> 

Et votre code CSS:

.important { background-color:yellow; } 
.sorta-important { background-color:lightyellow; } 

De cette façon, vous conservez vos détails de présentation séparés et vos noms de classe significatifs.

Answer 2

Je l'ai fait dans jQuery:

<select id="ddlColors" style="background-color: White;"> 
    <option style="background-color: Aqua;">1</option> 
    <option style="background-color: Blue;">2</option> 
    <option style="background-color: Fuchsia;">3</option> 
    <option style="background-color: Gray;">4</option> 
</select> 
<script> 
    $("select").change(function() { 
     $("select").css("background-color", $("select option:selected").css("background-color")); 
    }) 
    .change(); 
</script>