: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;

}

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