如何更改选择框的选项文本的颜色？

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

我的jsfiddle在这里jsfiddle

8 个解决方案

#1

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

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

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

但正如您所看到的，因为选项中的第一项是您的选择控件显示的第一项，您无法看到其指定的颜色。如果打开选择列表并查看打开的项目，您将看到可以为第一个选项指定灰色。所以你需要在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.

这是我在jsFiddle中的代码。

#2

I was recently having trouble with this same thing and I found a really simple solution.

我最近遇到了同样的问题，我找到了一个非常简单的解决方案。

All you have to do is set the first option to disabled and selected. Like this:

您所要做的就是将第一个选项设置为禁用和选中。喜欢这个：

<select id="select">
    <option disabled="disabled" selected="selected">select one option</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
    <option>five</option>
</select>

This will display the first option (grayed out) when the page is loaded. It also prevents the user from being able to select it once they click on the list.

这将在加载页面时显示第一个选项（灰显）。它还可以防止用户在单击列表后选择它。

#3

You just need to add disabled as option attribute

您只需添加禁用作为选项属性

<option disabled>select one option</option>

#4

Here is my demo with jQuery

这是我的jQuery演示

<!doctype html>
<html>
<head>
<style>
    select{
        color:#aaa;
    }
    option:not(first-child) {
        color: #000;
    }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("select").change(function(){
            if ($(this).val()=="") $(this).css({color: "#aaa"});
            else $(this).css({color: "#000"});
        });
    }); 
</script>
<meta charset="utf-8">
</head>
<body>
<select>
    <option disable hidden value="">CHOOSE</option>
    <option>#1</option>
    <option>#2</option>
    <option>#3</option>
    <option>#4</option>
</select>
</body>
</html>

https://jsfiddle.net/monster75/cnt73375/1/

#5

Try just this without the span tag:

试试这个没有span标签：

<option selected="selected" class="grey_color">select one option</option>

For bigger flexibility you can use any JS widget.

为了更大的灵活性，您可以使用任何JS小部件

#6

You can't have HTML code inside the options, they can only contain text, but you can apply the class to the option instead:

您不能在选项中包含HTML代码，它们只能包含文本，但您可以将该类应用于该选项：

<option selected="selected" class="grey_color">select one option</option>

Demo: http://jsfiddle.net/Guffa/hUpAB/9/

演示：http：//jsfiddle.net/Guffa/hUpAB/9/

Note:

注意：

The support for styling options varies between browsers. In modern brosers you generally can expect support for coloring but not for font size. A browser in a phone for example usually doesn't display the options in a dropdown, so the styling would not be relevant at all.
对样式选项的支持因浏览器而异。在现代的brosers中，您通常可以期望支持着色，但不支持字体大小。例如，手机中的浏览器通常不会在下拉列表中显示选项，因此样式根本不相关。
You should not have html and head tags in the HTML code in jsfiddle.
你不应该在jsfiddle的HTML代码中有html和head标签。
You should name your classes for what the represent, not how they look.
您应该为您的类命名代表什么，而不是它们的外观。

#7

<select id="select">
    <optgroup label="select one option">
        <option>one</option>  
        <option>two</option>  
        <option>three</option>  
        <option>four</option>  
        <option>five</option>
    </optgroup>
</select>

It all sounded like a lot of hard work to me, when optgroup gives you what you need - at least I think it does.

这对我来说听起来很辛苦，当optgroup给你你需要的东西 - 至少我认为它确实如此。

#8

-2

just use the span tag

只需使用span标签

<option value="" disabled selected ><span style="color:grey;">Select Category...</span></option>

And thats it

就是这样

#1