Set font color for select option placeholder

I've been looking for this for a long time, and figured there isn't really a proper way to do this with only CSS (and not requiring a field) at the moment. So I did it with a bit of jQuery like so:

if (jQuery('select').length) {
    jQuery('select').each(function () {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });

    jQuery('select').on('change', function (e) {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });
}

Then in my (S)CSS I did:

select {
    color: #000;
}

select.placeholder {
    color: #999;
}

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>

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>