我想改变选择选项文本的颜色 [英] i want to change the color of the select options texts

问题描述

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

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:

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

我的css是：

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

我的jsfiddle在这里 jsfiddle

My jsfiddle is here jsfiddle

推荐答案

Suresh，你不需要在代码中使用任何东西。
您所需要的只是这样：

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

HTML：

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

Css：

.others {color:black}

但你可以看到，项目在选项中是您的选择控件显示的第一件事，您不能看到其分配的颜色。如果您打开选择列表并查看打开的项目，您将看到您可以为第一个选项指定灰色颜色。
所以你需要jQuery中的其他东西。

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');
      }
   }); 
});

这是我的代码 jsFiddle 。

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