Here is a select input:
<select name="" id="">
<option disabled hidden selected value="">
default
</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">3</option>
</select>
I want to style the placeholder or first value differently to make it appear like a placeholder. I have attempted various CSS rules like:
select option:disabled { color: red; }
select :invalid { color: red; }
select option:first-child { color: red; }
select { color: grey; } option:first-child { color: red;}
Unfortunately, none of these approaches have been successful, leaving me unsure of how to proceed. I would prefer not to resort to transparent text color and overlaying a label on the select input.