I use input:not(:placeholder-shown)
to determine if a value is in an input field.
Is there some CSS way to check if an <option />
has been selected in a <select>
element?
I want to style the label tag immediately following the select dropdown IF an option has been selected.
Here is an example:
<select class="form-control">
<option></option>
<option value="1">One</option>
</select>
<label>Pick One</label>
Here is the CSS that I want to use to manipulate if an option (with a value) has been selected.
select.form-control:checked ~ label{
color: red;
}
Yes, the :checked
pseudo-class also targets <option>
tags.
Example:
option:checked { display:none; }
Source:
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>