Ok, так что вы можете использовать Jquery читать class из выбранного option затем установить, что class как class в <select>. Вот код, а затем скрипку ...
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>
Вот скрипка: http://jsfiddle.net/DrydenLong/3QUN6/
UPDATE
По желанию, вот разбивка моего кода выше:
$("#color_me").change(function(){
Эта строка вызывает функцию, когда элемент с id из «color_me» изменяется. то есть выбирается опция из списка выбора.
var color = $("option:selected", this).attr("class");
Это определяет переменную color, как независимо от class тока выбранного option есть. Переменная this относится к элементу DOM, на который мы ссылались в первой строке. В основном this гарантирует, что мы получим класс от правильного <select>, т. Е. <select>, на который мы только что нажали.
$("#color_me").attr("class", color);
});
Эта строка присваивает переменной color, определенную выше, в качестве class элемента с id из #color_me.
Я думаю, вам нужно манипулировать javscript, чтобы сделать это. – mshsayem
Вам нужно будет применить 'background-style' к тегу'
Возможный дубликат [multi select box selected background color | css] (http://stackoverflow.com/questions/14168650/multi-select-box-selected-background-color-css) – KatieK