-1

I want to change the text color of a hidden option. The hidden option should be shown as a placeholder text not a selectable option and the placeholder should not shown as element in the select. It should be as shown in the example below. Placeholder text in red and 2 elements to select. I tried to put the style directly on the element, but that didn't work either.

With this HTML / CSS I was expecting that the text of the "placeholder"-option is red.

select option[hidden] {
  color: red;
}
<select>
  <option value="" hidden selected style="color: red;">Numbers</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
creep3007
  • 1,794
  • 2
  • 21
  • 22
  • 4
    Why are you setting an option you actually want to _see_, to `hidden`? – CBroe May 16 '23 at 13:24
  • @CBroe thanks for asking. I would like to display "Numbers" as a placeholder-text and not as a selectable option – creep3007 May 16 '23 at 13:31
  • @Justinas I would like to have the placeholder not displayed as an option in the select. Therefore also the hidden attribute. – creep3007 May 16 '23 at 13:37
  • The second-highest scoring answer on the target question shows how to do this. – TylerH May 16 '23 at 13:47

1 Answers1

1

hidden element is not visible, so you can not tell if it's actually changing color.

Maybe you want to change color of <select> shown value?

select:invalid {
  color: red;
}
<select required>
  <option value="" disabled selected style="color: red;">Numbers</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
Justinas
  • 41,402
  • 5
  • 66
  • 96