CODEWITHSUNDEEP
htmlcssselectinput
Joshua
Joshua

Reputation: 3176

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

html:

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

Upvotes: 41

Views: 258266

Answers (9)

softwarer
softwarer

Reputation: 49

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>

Upvotes: 0

Jairin
Jairin

Reputation: 36

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

Upvotes: 1

Flo Develop
Flo Develop

Reputation: 755

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

Upvotes: 0

EUGUK
EUGUK

Reputation: 101

For Option 1 used as the placeholder:

select:invalid { color:grey; }

All other options:

select:valid { color:black; }

Upvotes: 10

mnsr
mnsr

Reputation: 12437

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

Upvotes: 29

Oscar Barrett
Oscar Barrett

Reputation: 3265

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>

Upvotes: 44

Chloe
Chloe

Reputation: 26264

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>

Upvotes: 6

smoyth
smoyth

Reputation: 709

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

Upvotes: 1

glautrou
glautrou

Reputation: 3198

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

Upvotes: 1

Related Questions