How do change the color of the text of an

前端未结

关注

 7  755

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:

相关标签:

7条回答

渐次进展

2020-11-27 17:22
You just need to add disabled as option attribute
```
<option disabled>select one option</option>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
礼貌的吻别

2020-11-27 17:22
You can't have HTML code inside the options, they can only contain text, but you can apply the class to the option instead:
```
<option selected="selected" class="grey_color">select one option</option>
```
Demo: 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.
- You should not have html and head tags in the HTML code in jsfiddle.
- You should name your classes for what the represent, not how they look.
0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-11-27 17:24
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

名媛妹妹

2020-11-27 17:28

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.

0 讨论(0)

死守一世寂寞

2020-11-27 17:38

Here is my demo with 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/

0 讨论(0)

谎友^

2020-11-27 17:39

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

0 讨论(0)

1 2 下一页

热议问题

How do change the color of the text of an within a <select>?

How do change the color of the text of an