Modify Select So Only The First One Is Gray

Question

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.

Leave a Comment Cancel reply