Modify Select So Only The First One Is Gray

Question

I have a select element and am using the first option as the title of the select field. I am wondering if there is a way to gray out the text inside the select field when the first option is selected. Can this only be done in JS, or is there a CSS solution?

I have tried changing the style of the first option but that only changes the colour of the text when I activate the dropdown menu.

<select>
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Answer 1

Here is a more modern solution so it's not specific to the first option, but rather an invalid option and requires no JS to show only the title/placeholder option as grey whereas the rest appear normal.

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #999999;
}

label {
  display: block;
  margin: 16px 0;
}

/*Added for browser compatibility*/
[hidden] {
  display: none;
}

<label>
    Invalid option cannot be selected and is hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled hidden>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option cannot be selected, but is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option can be selected and is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

The :invalid selector on the select only works on an option if the select box is required and the selected option's value is empty, so you can style it as you would a text box's placeholder text.

Setting it to disabled prevents the user from selecting it in the select's options, and setting it to hidden hides it from the select's options.

Here is my CodePen demo that explores additional select box styles and shows this one in action on a light background.

Answer 2

September 2017 edit

You should take a look at Tessa's answer below, since it's CSS only and much better now! This answer is almost 5 years old now, so things have changed a bit. I'm keeping the original answer just for reference.

Original answer

I am closer to what you need:

You need to gray the entire SELECT (so that when it's closed, it is gray), then "un-gray" all the OPTION's (put them black) and gray the first-child. Something like this:

CSS

select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}

EDIT So the edited code is:

HTML

<select onchange="changeMe(this)">
  <option selected disabled>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Javascript

<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>

I've update jsFiddle. You can check it here: http://jsfiddle.net/s5Xy2/5/ ​

Notice that I've also changed the HTML part, because I think you want to use the "disabled" attribute (and because of that, you'll have to add the "selected" attribute also).

If you still want the pure CSS code, it's here: http://jsfiddle.net/s5Xy2/4/

Answer 3

Inspired from Fábio Silva's solution, a very cool solution using AngularJS:

select {
  color: #ccc;
}
option {
  color: #aaa;
}
option:first-child {
  color: #ccc;
}
select.ng-dirty {
  color: #aaa;
}

Answer 4

You can edit your code to my code :

<select id="drop">
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<style type="text/css">
#drop :first-child
{
color:gray;
}
</style>

This code set first item color gray .

i hope help you...

Answer 5

Here's my 2018 version that combines some of the other answers and a bit of my own js. There does not seem to be a solution that works w/o javascript if you want the first element gray when it is closed.

var grayout = document.getElementsByClassName('grayout');

var grayOutSelect = function() {
    if ( this.value === "" ) {
        this.classList.add('gray');
    } else {
        this.classList.remove('gray');
    }
};

for (var i = 0; i < grayout.length; i++) {
    grayout[i].addEventListener('change', grayOutSelect);
    if ( grayout[i].value === "" ) {
        grayout[i].classList.add('gray');
    } else {
        grayout[i].classList.remove('gray');
    }
}

select {
  color: #333;
}
select.gray {
  color: #aaa;
}

/* Optional styles for when the select is open. Doesn't work on all browsers */
option {
  color: black;
}
.grayout option:first-child {
  color: gray;
}


/* Extra / just to make the demo look nice */
body {
  background: #ddd;
  padding: 30px;
  font-size: 20px;
}
select {
  margin: 0;
  vertical-align: top;
  padding: 5px 60px 5px 8px;
  background-color: #fff;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4b/Feather-arrows-chevron-down.svg');
  background-position: 97% center;
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 18px;
  border: 2px solid #999;
  border-radius: 3px;
  -webkit-appearance: button;
  -webkit-border-radius: 3px;
  -webkit-padding-end: 30px;
  -webkit-padding-start: 8px;
  -webkit-user-select: none;
  -moz-appearance: none;
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border 300ms;
}

<p>main example</p>
<p>
  <select class="grayout">
    <option value="">Please select your favourite fruit</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </select>
</p>
<p>one of the real options is selected</p>
<p>
  <select class="grayout">
    <option value="">Please select your favourite computer</option>
    <option value="apple" selected>Apple</option>
    <option value="c64">Commodore 64</option>
    <option value="gateway2000">Gateway 2000</option>
  </select>
</p>
<p>the grayout style is not applied here</p>
<p>
  <select>
    <option value="">Please select your favourite insult</option>
    <option value="jerk">Jerk</option>
    <option value="ahole">A**hole</option>
    <option value="shakespeare">Thou damned and luxurious mountain goat</option>
  </select>
</p>