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 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> </select> 

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

I have tried:

onchange="this.style.color = 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?

Answer 1

Try this:

.greenText{ background-color:green; }    .blueText{ background-color:blue; }    .redText{ background-color:red; }

<select      onchange="this.className=this.options[this.selectedIndex].className"      class="greenText">       <option class="greenText" value="apple" >Apple</option>      <option class="redText"   value="banana" >Banana</option>      <option class="blueText" value="grape" >Grape</option>  </select>

Answer 2

ONE COLOR CASE - CSS only

Just to register my experience, where I wanted to set only the color of the selected option to a specific one.

I first tried to set by css only the color of the selected option with no success.

Then, after trying some combinations, this has worked for me with SCSS:

select {       color: white; // color of the selected option        option {         color: black; // color of all the other options       }  } 

Take a look at a working example with only CSS:

select {    color: yellow; // color of the selected option   }    select option {    color: black; // color of all the other options  }

<select id="mySelect">      <option value="apple" >Apple</option>      <option value="banana" >Banana</option>      <option value="grape" >Grape</option>  </select>

For different colors, depending on the selected option, you'll have to deal with js.