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
Suresh, you don't need use anything in your code. 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.
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.
You just need to add disabled as option attribute
<option disabled>select one option</option>
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 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>
<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.
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.
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;
}
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>
$(document).ready(function() {
var defaultVal = $("#select").attr('data-default');
$("#select option").each(function()
{
var optVal = $(this).val();
if (optVal == defaultVal) {
$('#select option.others').css({'color':'black', 'font-weight':'bold'});
} else {
$('#select').css('color','gray');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" data-default="1">
<option value="null">select one option</option>
<option value="1" class="others">one</option>
<option value="2">two</option>
</select>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.