Change Text Color of Selected Option in a Select Box

Question

I have a select box. The options have been styled with different colors via a CSS file that has been referenced. I want to be able to select an option and change the text co

Answer 1

You could do it like this.

jsFiddle

JS

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}

CSS

.redText {
    background-color:#F00;
}
.greenText {
    background-color:#0F0;
}
.blueText {
    background-color:#00F;
}

You could use option { background-color: #FFF; } if you want the list to be white.

HTML

    Apple
    Banana
    Grape

Since this is a select it doesn't really make sense to use .yellowText as none selected if that's what you were getting at as something must be selected.