2

I have a select here:

<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 am trying to make the placeholder or the first value a different color so it looks like a placeholder. I have tried doing things like:

select option:disabled { color: red; }
select :invalid { color: red; }
select option:first-child { color: red; }
select { color: grey; } option:first-child { color: red;}

None of these have worked so I'm kind of stuck. I don't really want to have to use a trick like making the color transparent and putting a label on top of the select.

Taylor Austin
  • 5,407
  • 15
  • 58
  • 103
  • Maybe helps https://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-select-elements – Sangsom Jul 11 '18 at 13:55

1 Answers1

3

To cite this answer, you can't actually style it as it's rendered by the OS.

But fortunately, in your case, you can add the attribute disabled to the placeholder value: it will appear greyed out in the list and won't be selectable which will prevent your users to send the form with the placeholder value without any validation!

You can see it in action in this fiddle to test it out (and also see that a bunch of rules are applied to the option element but none of them works).

rob_dev
  • 56
  • 1
  • 3