Set font color for select option placeholder

To directly address the option font color, we can set the color on the select element to the light grey, then set all the option font colors except the first to black.

This way, the first option inherits the light grey, and shows as such while the select is both open and closed.

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

CSS:
select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}

Leave a comment

Your email address will not be published. Required fields are marked *