打开下拉菜单时可见选择选项的文本颜色？答案

【问题标题】：Text color of select options visible when dropdown opened?打开下拉菜单时可见选择选项的文本颜色？
【发布时间】：2017-05-08 17:00:30
【问题描述】：

是否可以为下拉菜单中的每个选项提供自己的文本颜色？我曾尝试使用 css 和/或 jQuery 来实现这一点，但没有任何反应。在FF中测试过。更清楚一点：当我打开下拉菜单时，我想看到其中的选项，它们都有自己的文本颜色。我不需要关闭下拉菜单后可见的选定选项来保留颜色。

我尝试了什么：

$('#sel option:selected').css('color', 'red');

.a {
  color: red;
}

.b {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
  <option class="a" value="1">Bla1</option>
  <option class="b" value="2">Bla2</option>
</select>

当我在 FF 中查看元素时，我可以看到它有

style="color: red;"

不显示。

为了更清楚：目的是用户将选择一个选项，并且可以返回到相同的下拉菜单以查看之前选择的选项是否已被处理。允许再次选择已处理的选项，因此所有选项都需要保留在下拉列表中。

有什么建议吗？

【问题讨论】：

当我在 Windows 10 上查看您在 FF 53.0.2（32 位）中的 sn-p 时，这两个选项具有不同的颜色。当然，两者的高亮颜色是相同的，所以你需要在两个选项之间移动高亮才能看到颜色...
奇怪。唯一的区别是我的 FF 是 64 位的。而且我没有看到彩色选项...
是的。我刚刚安装了 64 位版本，可以看到同样的东西。我建议您为此使用反馈选项或file a bug report。
谢谢！以为我要疯了......
刚刚提交了一个错误。让我们看看会发生什么...tnx！

标签： jquery html css

【解决方案1】：

请在下面找到，这可能对您有所帮助！

   $(document).ready(function(){

$("#sel").val('2');
$("#sel").on('change',function(){
   
    if($(this).find("option:selected").val()== 1)
     {
       $("body").css("background-color","#D83F21");    
      }
     else{
      $("body").css("background-color","#FFF");
       }
  });
  
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="sel">
  <option class="a" value="1">Bla1</option>
  <option class="b" value="2">Bla2</option>
</select>
 </body>

【讨论】：

【解决方案2】：

事实证明，这种行为发生在 FF 53.0.2 的 64 位版本中。其他人已经证实了这一点。
但是，它在同一 FF 53.0.2 的 32 位版本中工作。 Win 10 中的所有测试。

我已向 Mozilla 提交错误报告：Bug 1363152

【讨论】：