Detecting if an Pick One – Steve Lloyd Mar 10 '19 at 16:16

Question

Yes, the :checked pseudo-class also targets <option> tags.

Example:

option:checked { display:none; }

Source:

http://www.w3.org/TR/selectors/#checked

EDIT:

If you want to target an element outside of your <select>, it can be done in a hacky way by manipulating the :valid css pseudo-class. Note that the required attribute must be enabled for the <select> tag to register as valid/invalid.

Example:

body {
  background-color: #fff;
}

select:valid ~ label {
  background-color: red;
}

<select required>
  <option value="" selected>Please select an option</option>
  <option>1</option>
  <option>2</option>
</select>
<label>Please select an option</label>

Hybrid · Accepted Answer · 2019-03-10T20:47:32.423

7

Yes, the :checked pseudo-class also targets <option> tags.

Example:

option:checked { display:none; }

Source:

http://www.w3.org/TR/selectors/#checked

EDIT:

If you want to target an element outside of your <select>, it can be done in a hacky way by manipulating the :valid css pseudo-class. Note that the required attribute must be enabled for the <select> tag to register as valid/invalid.

Example:

body {
  background-color: #fff;
}

select:valid ~ label {
  background-color: red;
}

<select required>
  <option value="" selected>Please select an option</option>
  <option>1</option>
  <option>2</option>
</select>
<label>Please select an option</label>

edited Mar 10 '19 at 20:47

answered Mar 10 '19 at 08:04

Hybrid

5,656
2
18
42

My goal is to apply a style to a label after the select tag. Is there a way to do that using this? Pick One – Steve Lloyd Mar 10 '19 at 16:13
1

Edit your question with the code you are talking about and I’ll try to edit mine w a more precise answer – Hybrid Mar 10 '19 at 16:16
I have edited the original question and tried your suggestion but it did not work. – Steve Lloyd Mar 10 '19 at 19:58
1

Thank you for pointing this out. This will work as long as the select field is required. For optional select tags there does not seem to be a way. – Steve Lloyd Mar 11 '19 at 01:04

score 1 · Answer 2 · answered Mar 10 '19 at 19:58

Since your select element doesn't have a multiple attribute, it isn't possible for an option not to be selected in it. (Yes, your option with no content and no value is still an option, can be selected, and is selected by default).

If it did, then what you want still wouldn't be possible. The :checked property would apply to the <option> elements, but you couldn't use it to target the <select> because CSS has no parent selector.

2 Answers2