Menu
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements. to set the whole select element to background color 009966 and color FFF . Then we override the the styles in the option elements with style="background: white; color: black;" .
The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background.
You can change the color of text in your Word document. Select the text that you want to change. On the Home tab, in the Font group, choose the arrow next to Font Color, and then select a color. You can also use the formatting options on the Mini toolbar to quickly format text.
To change some of the text in the HTML document to another color use the FONT COLOR Tag. To change the color of the font to red add the following attribute to the code to the <FONT COLOR=" "> tag. #ff0000 is the color code for red.
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.
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>
https://jsfiddle.net/monster75/cnt73375/1/
<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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With