:checked

The :checked pseudo-class applies to `input` elements (selected elements type) as well as the selected `option` element.

 

The pseudo-class :checked finds any input elements such as radiocheckbox or option that are selected or enabled. The user can change the state (from checked to unchecked) by clicking on the element, or by selecting another value, in which case :checked will not be reapplied to the element but saved.

Syntax

/* Matches all checked/selected radio, checkbox, or option elements */

:checked {
  color: orange;
}

/* Matches input and the associated label */

input:checked + label {
	color: red;
}

Examples

Click on the checkbox labels below to see the applied style take effect.


/* HTML */

<input type="checkbox" id="element1">
<label for="element1">option #1</label>

<input type="checkbox" id="element2">
<label for="element2">option #2</label>

/* CSS */

input:checked + label {
     color: white;
     background-color: orange;
}