Issue
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
Solution
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.
Answered By - Mohammad Saberi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.