如何更改选择框的选项文本的颜色？ [英] How do change the color of the select box's option text?

问题描述

我试图将第一个选项的颜色更改为灰色，只有文本（选择一个选项），但这里它不起作用：

  .grey_color {color：#ccc; font-size：14px;}  

< select id = 选择 > < option selected =selected>< span class =grey_color>选择一个选项< / span>< / option> <选项 - 酮< /选项> <选项>二< /选项> <选项>三< /选项> <选项>四< /选项> < option> five< / option> < / select>

我的jsfiddle在这里 jsfiddle 苏雷什，你不需要在你的代码中使用任何东西。
您需要的仅仅是这样的：

{color：black}

< select id =select > < option style =color：greyvalue =null>选择一个选项< / option> < option value =1class =others> one< / option> < option value =2class =others> two< / option>< / select>

但是，正如您所看到的，因为选项中的第一项是您的选择控件显示的第一项，您无法看到其指定的颜色。如果您打开选择列表并查看已打开的项目，则会看到您可以为第一个选项指定一个灰色。
所以你需要jQuery中的其他东西。

pre $ $（document）.ready（function（）{
$（'＃select'）.css（'color'，'gray'）;
$（'＃select'）。change（function（）{
var current = $（'＃select '）.val（）;
if（current！='null'）{
$（'＃select'）。css（'color'，'black'）;
} else {
$（'＃select'）.css（'color'，'gray'）;
}
}）;
}）;

这是我在 jsFiddle 。

I am trying to change the color of the first option to grey color, that only the text (select one option) but here it's not working here:

.grey_color {
  color: #ccc;
  font-size: 14px;
}

<select id="select">
   <option selected="selected"><span class="grey_color">select one option</span></option>
   <option>one</option>  
   <option>two</option>  
   <option>three</option>  
   <option>four</option>  
   <option >five</option>  
</select>

My jsfiddle is here jsfiddle

解决方案

Suresh, you don't need use anything in your codes. What you need is just something like this:

.others {
    color:black
}

<select id="select">
    <option style="color:gray" value="null">select one option</option>
    <option value="1" class="others">one</option>
    <option value="2" class="others">two</option>
</select>

But as you can see, because your first item in options is the first thing that your select control shows, you can not see its assigned color. While if you open the select list and see the opened items, you will see you could assign a gray color to the first option. So you need something else in jQuery.

$(document).ready(function() {
   $('#select').css('color','gray');
   $('#select').change(function() {
      var current = $('#select').val();
      if (current != 'null') {
          $('#select').css('color','black');
      } else {
          $('#select').css('color','gray');
      }
   }); 
});

This is my code in jsFiddle.

这篇关于如何更改选择框的选项文本的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！