下拉列表打开时可见选项的文字颜色?

时间:2017-05-08 17:00:30

标签: jquery html css

是否可以在下拉菜单中为每个选项提供自己的文字颜色? 我试图使用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>
&#13;
&#13;
&#13;

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

style =&#34; color:red;&#34;

没有显示出来。

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

有什么建议吗?

2 个答案:

答案 0 :(得分:0)

请找到下面的内容,这可能对您有所帮助!!

&#13;
&#13;
   $(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");
       }
  });
  
   });
&#13;
   
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

我已经向Mozilla提交了一个bug报告:Bug 1363152