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 {_x000D_
color: #ccc;_x000D_
font-size: 14px;_x000D_
}<select id="select">_x000D_
<option selected="selected"><span class="grey_color">select one option</span></option>_x000D_
<option>one</option> _x000D_
<option>two</option> _x000D_
<option>three</option> _x000D_
<option>four</option> _x000D_
<option >five</option> _x000D_
</select>My jsfiddle is here jsfiddle
Try just this without the span tag:
<option selected="selected" class="grey_color">select one option</option>
For bigger flexibility you can use any JS widget.
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>
You just need to add disabled as option attribute
<option disabled>select one option</option>
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:
html and head tags in the HTML code in jsfiddle.<select id="select">_x000D_
<optgroup label="select one option">_x000D_
<option>one</option> _x000D_
<option>two</option> _x000D_
<option>three</option> _x000D_
<option>four</option> _x000D_
<option>five</option>_x000D_
</optgroup>_x000D_
</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.
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">_x000D_
<option disabled="disabled" selected="selected">select one option</option>_x000D_
<option>one</option>_x000D_
<option>two</option>_x000D_
<option>three</option>_x000D_
<option>four</option>_x000D_
<option>five</option>_x000D_
</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.
Source: Stackoverflow.com