The checked pseudo-class
The checked pseudo-class allows you
to catch a checked
checkbox
or radio.
Unfortunately, styles for decorating them cannot be specified. For example, you cannot set a background or border color (you can set width and height, for example, but these will not have the same effect as you might expect).
Despite this, you can set styles for adjacent
elements, for example, like this:
input:checked + p - let’s set styles
for the paragraph that is placed directly
below the checked input.
Syntax
element:checked {
}
Example
Mark the checkboxes and you will see how the
label
tags, which are located immediately after
the checked checkboxes, light up in red:
<input type="checkbox" id="elem1">
<label for="elem1">label 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">label 2</label>
input:checked + label {
color: red;
}
:
Example
Mark radio and you will see
the labels, which are located
immediately after the marked radio,
light up in red:
<input type="radio" name="elem" id="elem1">
<label for="elem1">label 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">label 2</label>
input:checked + label {
color: red;
}
:
