How to change the text color of first select option
I have a select element which has several items. I want to change the color of its first item, but it seems the color only shows when you click on the select dropdown. What I want is to change the color (like gray) when the page is loaded so users can see the first option color is different. See the example here. http://jsbin.com/acucan/4/ css:
select < width: 150px; height: 30px; padding: 5px; color: green; >select option < color: black; >select option:first-child
I do not understand what you are trying to achieve. The items are only visible when the menu is open. So how what is wrong about your solution?
9 Answers 9
If the first item is to be used as a placeholder (empty value) and your select is required then you can use the :invalid pseudo-class to target it.
This also coloured the valid options in the list for me. I was able to keep the expected color with a select:invalid option:not(:disabled) < color: black >rule
The default appearance will ignore the color change as it displays the element using platform-native styling.
select < width: 150px; height: 30px; padding: 5px; color: green; >select option < color: black; >select option:first-child
To make this work in Webkit browsers on the Mac (Chrome and Safari), you’ll need to disable the chrome for the select using -webkit-appearance:none . Of course, that will enable the style, but will remove all the rest of the select chrome as well, so you’ll need to restyle everything else in the element as well. Fiddle: jsfiddle.net/wFP44/1
For Option 1 used as the placeholder:
Here is a way so that when you select an option, it turns black. When you change it back to the placeholder, it turns back into the placeholder color (in this case red).
It requires the options to have values.
$('select').on('change', function() < if ($(this).val()) < return $(this).css('color', 'black'); >else < return $(this).css('color', 'red'); >>); You can do this by using CSS: JSFiddle
Or if you absolutely need to use JavaScript (not adviced for this): JSFiddle
I really wanted this (placeholders should look the same for text boxes as select boxes!) and straight CSS wasn’t working in Chrome. Here is what I did:
First make sure your select tag has a .has-prompt class.
Then initialize this class somewhere in document.ready .
# Adds a class to select boxes that have prompt currently selected. # Allows for placeholder-like styling. # Looks for has-prompt class on select tag. Mess.Views.SelectPromptStyler = Backbone.View.extend el: 'body' initialize: -> @$('select.has-prompt').trigger('change') events: 'change select.has-prompt': 'changed' changed: (e) -> select = @$(e.currentTarget) if select.find('option').first().is(':selected') select.addClass('prompt-selected') else select.removeClass('prompt-selected') How TO — Change Text Selection Color
Learn how to override the default text selection color with CSS.
Text Selection Color
Select the following text:
Default text selection color
Custom text selection color
How To Change Text Selection Color
Use the ::selection selector to override the default text selection color:
Example
::selection color: red;
background: yellow;
>
Tip: Read more about the ::selection selector in our CSS Reference: CSS ::selection Property.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Overriding The Default Text Selection Color With CSS
One of those cool CSS3 declarations that you can use today is ::selection , which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal. Here is the rub:
Within the selection selector, color and background are the only properties that work. What you can do for some extra flair, is change the selection color for different paragraphs or different sections of the page. View Demo All I did was use different selection color for paragraphs with different classes:
p.red::selection < background: #ffb7b7; >p.red::-moz-selection < background: #ffb7b7; >p.blue::selection < background: #a8d1ff; >p.blue::-moz-selection < background: #a8d1ff; >p.yellow::selection < background: #fff2a8; >p.yellow::-moz-selection
Note how the selectors are not combined, even though the style block is doing the same thing. It doesn’t work if you combine them:
/* Combining like this WILL NOT WORK */ p.yellow::selection, p.yellow::-moz-selection
That’s because browsers ignore the entire selector if there is a part of it they don’t understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors. For even more crazy flair, you could reveal an image with text selection.