Set font color for select option placeholder

Question

Looking for a way to set the font color of a dropdown list placeholder. The following worked when the select id was required:

select:required:invalid {
    color: #9e9e9e;
}

However, I do not want these dropdown lists to be required for input. Once I remove the required tag, the placeholder font changes back to black.

The following is my dropdown list:

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

Answer 1

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 {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}

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

Since the light grey font color is achieved by setting it on the select element, then :not overruling it when setting the option color to black, when a selection is made, the text will also show as grey.

If that is undesirable, we could change the color depending on whether the select has :focus, either showing the grey or black (depending on taste) when the element is or is not in use:

/* with the :focus here, we would show grey when not using the element */
select {
  color: black;
}
/* with the :focus here, we show grey when using the element */
select:focus {
  color: #9e9e9e;
}
option {
  color: black;
}
option:first-of-type {
  color: #9e9e9e;
}

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

Further to those possibilities:

Although methods (including the following) can be employed to hide the initial/default non-value (i.e. "Choose Primary Sport...") when the select is open, that might not be desirable.

NOTE: Once an option has been selected, it is not possible to return to the default non-value initial state in the case of a change of mind.

If however this usability/accessibility issue is not a concern, here's a simple modification with the non-value default hidden when the select` is open:

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}
/* the modification */
option:first-of-type {
  display: none;
}

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

Answer 2

Look at this way...

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

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