: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
Edge Chrome Firefox Opera Safari
121193.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 1st October 2023