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?

Your `onchange` tries to fetch `backgroundColor`, but your `setSelectColor` tries to fetch `color`. Is this intended? — Passerby, Apr 02 '13 at 04:01
Have you tried this solution? https://stackoverflow.com/a/20538979/452587 — thdoan, Nov 03 '20 at 18:23

score 52 · Accepted Answer · edited Jun 27 '18 at 17:08

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>

score 30 · Answer 2 · edited Jan 25 '17 at 11:26

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.

score 8 · Answer 3 · answered Apr 02 '13 at 04:06

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

<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.

MarmiK · Answer 4 · 2016-08-25T06:08:56.360

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.

edited Aug 25 '16 at 06:08

answered Apr 02 '13 at 04:24

MarmiK

5,639
6
40
49

score 0 · Answer 5 · answered Mar 04 '20 at 12:02

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.

score -1 · Answer 6 · answered Dec 27 '16 at 16:22

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

Change Text Color of Selected Option in a Select Box

6 Answers6

Linked

Related