更改选择框中所选选项的文本颜色

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.

Answer 3

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; } option { background-color: #FFF; } if you want the list to be white.

HTML

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

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.

Answer 4

JQuery Code:

$('#mySelect').change(function () {
    $('#mySelect').css("background", $("select option:selected").css("background-color"));
});

This will replace the select 's background-color with selected option 's background-color .

Here is an example fiddle.

Answer 5

CSS
select{
  color:red;
 }

HTML
<select id="sel" onclick="document.getElementById('sel').style.color='green';">
 <option>Select Your Option</option>
 <option value="">INDIA</option>
 <option value="">USA</option>
</select>

The above code will change the colour of text on click of the select box.

and if you want every option different colour, give separate class or id to all options.

Answer 6

<html>
  <style>
.selectBox{
 color:White;
}
.optionBox{
  color:black;
}

</style>
<body>
<select class = "selectBox">
  <option class = "optionBox">One</option>
  <option class = "optionBox">Two</option>
  <option class = "optionBox">Three</option>
</select>