Change Text Color of Selected Option in a Select Box

前端未结

关注

 6  1731

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

相关标签:

6条回答

孤街浪徒

2020-12-02 23:35

You could do it like this.

jsFiddle

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.

0 讨论(0)

你的背包

2020-12-02 23:38
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2020-12-02 23:41
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2020-12-02 23:43
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉酒成梦

2020-12-02 23:43

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

0 讨论(0)

暗喜

2020-12-02 23:49

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>

0 讨论(0)