BobLopez BobLopez - 1 month ago 6x
HTML Question

Change Text Color of Selected Option in a Select Box

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 color of the closed select box to the color of the chosen option.

<select id="mySelect" class="yellowText">
<option class="greenText" value="apple" >Apple</option>
<option class="redText" value="banana" >Banana</option>
<option class="blueText" value="grape" >Grape</option>

So if I select Banana, the text should change from yellow to red.

I have tried:

onchange=" = this.options[this.selectedIndex].style.color;"

But this only works if I define my styles within the option tags inside html document.

I have also tried Javascript:

function setSelectColor(thisElement){
var thisElem = document.getElementById(thisElement);
var thisOption = thisElem.options[thisElem.selectedIndex];
var newColor = getStyle(thisOption,"color");
alert("New Color: "+ newColor);

But this always returns the color: white. The getStyle function works everywhere else I use it so I do not believe that's the problem.

I got getStyle from this very website:

function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
strValue = oElm.currentStyle[strCssRule];
return strValue;

How can I solve this with Javascript?


Try this:

     <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>

and use this css:

.greenText{ background-color:green; }

.blueText{ background-color:blue; }

.redText{ background-color:red; }