:checked CSS Pseudo Class
Description
The :checked pseudo-class applies to interface elements such as checkboxes, radio boxes, and option items when they are in the on position. Switching elements to this state occurs using the checked attribute of the <input> element or by the user.
Syntax
element:checked { … }
Example
<p>Which operating systems have you used?</p>
<p>
<input type="checkbox" id="a1"><label for="a1">Windows 10</label><br>
<input type="checkbox" id="a2"><label for="a2">Windows 8</label><br>
<input type="checkbox" id="a3"><label for="a3">Windows Vista</label><br>
<input type="checkbox" id="a4"><label for="a4">Windows XP</label><br>
<input type="checkbox" id="a5"><label for="a5">Linux</label><br>
<input type="checkbox" id="a6"><label for="a6">Mac OS</label>
</p>
<p><input type="submit" value="Submit"></p> input:checked + label {
background: yellow;
} Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 1 | 1 | 9 | 3.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 2 | 18 | 4 | 10.1 | 3.1 | X |