Question

https://jsfiddle.net/pbvijayk/7bLdg7cg/5/

option.red
{
  color: #cc0000;
}

<select name="color">
  <option class="red">Red</option>
  <option >White</option>
  <option >Blue</option>
  <option >Green</option>
</select>

请运行ie9和chrome中的代码。 ie9正确颜色显示的文本颜色将同时显示在下拉框和下拉框中。但是在下拉列表中显示但未在框中显示的铬文本颜色。

Answer 1

请尝试这个： https://jsfiddle.net/7bLdg7cg/7/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试给样式选择不是这样的选项：

<select name="color">
  <option class="red">Red</option>
  <option>White</option>
  <option >Blue</option>
  <option >Green</option>
</select>
<style>
select .red
    {
       color: #cc0000;
    }
</style>

选择选项文本颜色显示在下拉列表中但不在框中着色，此选项适用于ie 9但不适用于chrome

2 个答案: