Can't style disabled option in html select

Question

Despite following the example from w3schools.com, I can't style my disabled option:

<select id="state-handle">
  <option value="" selected="true" disabled>State of residence</option>
  <option value="usa">USA</option>
</select>

option {
  color: blue;
}

option:disabled {
  color: red;
}

JSFiddle

No red anywhere:

What am I doing wrong? I did the same thing as they do.

EDIT: my config is Windows 10 / Google Chrome (same result using Firefox on my machine)

The fiddle works here, at least under Linux; it might be different in other OSes. — Mr Lister, Mar 22 '20 at 08:48
By the way, the highlight colors override the default colors, which might confuse things. Hover your mouse over the USA part. — Mr Lister, Mar 22 '20 at 08:50
Look this similar thread: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element — Gianca, Mar 22 '20 at 08:54

score 0 · Answer 1 · answered Mar 22 '20 at 09:27

0

Your styles are valid, but your can remove selected="true" from your disabled option in order to see it.

answered Mar 22 '20 at 09:27

dako

1,081
1
12
22

Can't style disabled option in html select

1 Answers1