How do change the color of the text of an <option> within a <select>?
HtmlCssHtml Problem Overview
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
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
You just need to add disabled as option attribute
<option disabled>select one option</option>
Solution 4 - Html
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>
Solution 5 - Html
<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.
Solution 6 - Html
You can use optgroup around option in the select. It is easy to add colors to option
.type_slct {
color: #17b3cc
}
.type_slct option {
color: #1e293b
}
<select class="form-control" id="exampleFormControlSelect1">
<optgroup label="Type" class="type_slct">
<option value=""></option>
<option value="">Question</option>
<option value="">Feature Request</option>
<option value="">Refunds and Returns</option>
</optgroup>
</select>
Solution 7 - Html
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.
Solution 8 - Html
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
htmlandheadtags in the HTML code in jsfiddle. - You should name your classes for what the represent, not how they look.
Solution 9 - Html
Hi this is working for me
.custom-select:hover:not(:disabled),
.custom-select:focus:not(:disabled),
.custom-select:active:not(:disabled){
color: black;
}
select{
color: gray;
}
Solution 10 - Html
you can change color optgroup and options use this code:
optgroup {
color: red;
}
option {
color: black;
}
<select class="form-control" id="exampleFormControlSelect1">
<optgroup label="Last Used Projects">
<option>APOP Admin Website</option>
<option>APOP Categorization</option>
</optgroup>
</select>