How to change the text color of first select option

Question

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{
  color: green;
}

html:

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>

Answer 1

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.

select {
  -webkit-appearance: menulist-button;
  color: black;
}

select:invalid {
  color: green;
}

<select required>
  <option value="">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select>

Answer 2

What about this:

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;
}
select option { color: black; }
select option:first-child{
  color: green;
}

<select>
  <option>one</option>
  <option>two</option>
</select>

http://jsbin.com/acucan/9

Answer 3

For Option 1 used as the placeholder:

select:invalid { color:grey; }

All other options:

select:valid { color:black; }

Answer 4

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).

http://jsfiddle.net/wFP44/166/

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');
  }
});

select{
  color: red;
}
select option { color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>

Answer 5

You can do this by using CSS: JSFiddle

HTML:

<select>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
</select>

CSS:

select option:first-child { color:red; }

Or if you absolutely need to use JavaScript (not adviced for this): JSFiddle

JavaScript:

$(function() {
    $("select option:first-child").addClass("highlight");
});

CSS:

.highlight { color:red; }

Answer 6

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')

Then in CSS:

select.prompt-selected {
  color: $placeholder-color;
}

Answer 7

It seems that the fancy way with pure css would be more expensive; let's see with ES6

CSS
select{color:#AE1250}

JS
document.querySelectorAll('select').forEach((s) => {
    s.addEventListener('change',(e)=>{
    s.style.color=s.value==''?'#AE1250':'#fff';});            
 });

Answer 8

This code works on Chromium and change the color to black once an option is selected:

select {
  appearance: none;
}

select:invalid {
  color: green;
}

select option {
  color: black;
}

Answer 9

Only Copy below jQuery script in your HTML:

Note: All options must have a value and the value of the first option must be empty(value="").

$(document).ready(function () {
    $("select").each(function (i, select) {
        SetSelectColor(select);
    });
    $("select option").css('color', 'black');
    $("select option:first-child[value='']").css('color', '#999999');
    $("select").change(Select_Changed);    
});

function Select_Changed() {
    SetSelectColor(this);   
}

function SetSelectColor(select) {
    var value = $(select).val();
    $(select).css('color', value != '' ? 'black' : '#999999');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
    <option value="">Please select an option ...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>