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

Change Text Color of Selected Option in a Select Box

提问by BobLopez

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.

我有一个选择框。这些选项已通过已引用的 CSS 文件使用不同的颜色进行样式设置。我希望能够选择一个选项并将关闭的选择框的文本颜色更改为所选选项的颜色。

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

但这只有在我在 html 文档中的选项标签中定义我的样式时才有效。

I have also tried JavaScript:

我也试过 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.

但这总是返回颜色：白色。getStyle 函数适用于我使用它的其他任何地方，所以我认为这不是问题所在。

I got getStyle from this very website:

我从这个网站得到了 getStyle：

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?

我如何用 JavaScript 解决这个问题？

回答by Sharun

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>

回答by Mauricio Moraes

ONE COLOR CASE- CSS only

一种颜色的情况- 仅 CSS

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

只需注册我的经验，在这里我想设置只对颜色选择的选项，以特定的一个。

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

我首先尝试通过 css 仅设置所选选项的颜色，但没有成功。

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

然后，在尝试了一些组合之后，这对我来说对 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:

看一个只有 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.

对于不同的颜色，根据选择的选项，你将不得不处理 js。

回答by Daniel Imms

You could do it like this.

你可以这样做。

jsFiddle

js小提琴

JS

JS

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}

CSS

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.

option { background-color: #FFF; }如果您希望列表为白色，则可以使用。

HTML

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 selectit doesn't really make sense to use .yellowTextas none selected if that's what you were getting at as something must be selected.

由于这是一个select，.yellowText如果这是你必须选择的东西，那么使用none 是没有意义的。

回答by MarmiK

JQuery Code:

查询代码：

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

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

这将替换select的background-color有选择option的background-color。

Here is an example fiddle.

这是一个示例小提琴。

回答by Rajdeep p

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.

如果您希望每个选项都有不同的颜色，请为所有选项提供单独的类或 ID。

回答by Thaalinda

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