Ok, dzięki czemu można używać jQuery odczytać class wybranego option następnie ustawić jako że classclass z <select>. Oto kod, a następnie ryba ...
CSS
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.pink {
background-color: pink;
}
Jquery
$("#color_me").change(function(){
var color = $("option:selected", this).attr("class");
$("#color_me").attr("class", color);
});
HTML
<select id="color_me" class="">
<option class="green">successful</option>
<option class="orange">process failure</option>
<option class="pink">abandoned</option>
</select>
oto skrzypce: http://jsfiddle.net/DrydenLong/3QUN6/
UPDATE
Na życzenie, tu jest podział mojego kodu powyżej:
$("#color_me").change(function(){
Linia ta wywołuje funkcję, gdy element z id z "color_me" zmienia. tj. wybierana jest opcja z listy wyboru.
var color = $("option:selected", this).attr("class");
ten definiuje zmienną color jak cokolwiek class od aktualnie wybranego option jest. Zmienna this odnosi się do elementu DOM, do którego odwołujemy się w pierwszej linii. Zasadniczo this zapewnia, że otrzymujemy klasę od prawidłowej <select>, tj. <select>, którą właśnie kliknęliśmy.
$("#color_me").attr("class", color);
});
Linia ta przypisuje color zmiennej zdefiniowanej powyżej jako class elementu z id z #color_me.
Myślę, że potrzebujesz manipulacji javscript, aby to zrobić. – mshsayem
Musisz również zastosować "styl tła" do tagu '
możliwy duplikat [multi select box selected background color | css] (http://stackoverflow.com/questions/14168650/multi-select-box-selected-background-color-css) – KatieK