:checked CSS Pseudo Class
Description
The :checked
pseudo-class in CSS is a selector that targets input elements, such as checkboxes and radio buttons, when they are in a checked or selected state. It allows you to apply styles to these input elements based on whether they have been checked or not. This is commonly used in conjunction with labels and can be a powerful tool for creating interactive and user-friendly web forms.
For example, you can use :checked
to change the background color of a checkbox or radio button when it's selected, indicating to the user that the option has been chosen. Here's a simple example of how you might use it:
input[type="checkbox"]:checked {
background-color: lightblue;
}
In this example, when a checkbox input is checked, it will have a light blue background color. This visual feedback can help users understand their selections in web forms.
Syntax
: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
The following table will show you the current browser support for the CSS :checked
pseudo class.
Desktop | |||||
12 | 1 | 1 | 9 | 3.1 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 2 | 1 | 2 |
Last updated by CSSPortal on: 1st October 2023