8

I have a <select>:

select:invalid {
  color: red;
}
<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

Unfortunately the disabled select is not marked red.

Any idea?

It's not the option I like to style, I like to style the select!

6
  • It’s unclear what result you expect. - please choose - is red on the select box for me (Firefox 61, Arch Linux, Gnome). Commented Mar 15, 2018 at 10:12
  • @Xufox Ah firefox does not have this problem ;)
    – Grim
    Commented Mar 15, 2018 at 10:24
  • 1
    You should be aware that none of the solutions provided will work in Safari or Chrome on Mac.
    – Turnip
    Commented Mar 15, 2018 at 14:22
  • @Turnip indeed. Do you know any way to make this work on Safari?
    – Mig
    Commented Dec 3, 2020 at 8:59
  • @Grim if you use the feature to mimic gray placeholder on input fields, then Firefox will render both colors differently for whatever reason. At least on Firefox dev edition on Mac.
    – Mig
    Commented Dec 3, 2020 at 9:00

3 Answers 3

15

You need to specify value="" for the first option. Without value="", the value of an option is implicitly equal to its text content, meaning it fulfils the required constraint.

Demo:

select:invalid { color: red; }
<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

The above will make the select + all options red until a value has been chosen.

If you want the options to always be black, just extend the CSS a little:

select:invalid { color: red; }
select option { color: black; }
<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

2
  • I used value without ="". I hope it looks more invalid than a empty value.
    – Grim
    Commented Mar 18, 2018 at 19:21
  • 1
    As @Turnip mentioned in the question comments, this does not work on Safari+Mac though.
    – Mig
    Commented Dec 3, 2020 at 9:03
1

Try to use option:disabled.

select option:disabled {
  color: red;
}
<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

2
  • You style the option, i need to style the select.
    – Grim
    Commented Mar 15, 2018 at 10:26
  • @PeterRader your select is not disabled. Your first option is disabled. So what exactly do you want: to paint the whole select red (with all the options inside it, which user could change and they still be painted red), or just to make paint the select red when the disabled option is chosen (and in other cases leave select white), or what?
    – htshame
    Commented Mar 15, 2018 at 10:35
0

.choose_elements{
    background-color : red;
}
.elements{
    background-color : white;
}
<select required 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="choose_elements">
    <option value="0" class="choose_elements">- please choose -</option>
    <option value="1" class = "elements">A</option>
    <option value="2" class = "elements">B</option>
</select>

2
  • Select remains red if I choose valid option. A select having a valid option selected is not invalid anymore. If your browser gives different output, please write the browser in the comments.
    – Grim
    Commented Mar 15, 2018 at 10:33
  • This is better, but if I have a <input type="reset" /> in the form it does not work.
    – Grim
    Commented Mar 17, 2018 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.