:checked Pseudo-Class

CSS :checked Pseudo-Class

The CSS :checked pseudo-class selects checkboxes and radio buttons that are checked and <option> elements that are selected. It allows CSS to respond to the current state of these form controls without JavaScript.

The :checked Pseudo-Class

The :checked pseudo-class is added directly to a selector with no space between the selector and the colon.

input:checked {
  accent-color: #0088cc;
}

The selector input:checked matches an applicable <input> element while it is in its checked state.

Using :checked with Checkboxes

A checkbox matches :checked when it is checked and stops matching when it is unchecked.

input[type="checkbox"]:checked {
  accent-color: #0088cc;
}

<input type="checkbox" id="updates" name="updates">
<label for="updates">Receive updates</label>

When the user checks the checkbox, the :checked rule applies. If the checkbox is unchecked, the rule no longer matches.

Using :checked with Radio Buttons

Radio buttons also match :checked. In a group of radio buttons that share the same name, selecting one radio button normally clears the checked state from another radio button in that group.

input[type="radio"]:checked {
  accent-color: #0088cc;
}

<input type="radio" id="html" name="tutorial" value="html">
<label for="html">HTML</label>

<input type="radio" id="css" name="tutorial" value="css">
<label for="css">CSS</label>

The :checked rule follows whichever radio button is currently selected.

Using :checked with Options

The :checked pseudo-class can also match an <option> element that is currently selected in a <select> control.

option:checked {
  font-weight: bold;
}

<select name="topic">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

The selected option can match :checked, although the visual styling available for <option> elements can vary between browsers and operating systems.

:checked vs the checked Attribute

The CSS :checked pseudo-class describes the control's current checked state. The HTML checked attribute can specify the initial checked state of a checkbox or radio button when the page is loaded.

<input type="checkbox" id="terms" name="terms" checked>
<label for="terms">Accept terms</label>

The checkbox begins checked because the checked attribute is present. If the user later unchecks it, the control no longer matches :checked, even though the original HTML still contains the checked attribute.

Styling a Label for a Checked Control

The :checked pseudo-class can be combined with a sibling selector to change the appearance of a label that follows a checked control.

input:checked + label {
  color: #0088cc;
  font-weight: bold;
}

<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>

The selector input:checked + label matches the <label> immediately following a checked input. When the checkbox is unchecked, the label no longer receives those styles.

When to Use :checked

Use :checked when styles should respond to the current checked or selected state of an applicable form control. Common uses include emphasizing selected choices, changing label styles, and customizing the appearance of checked checkboxes and radio buttons.

The control should remain understandable and usable without relying only on a color change. Keep the normal checked indicator visible or provide another clear visual indication of the selected state.

Summary

The CSS :checked pseudo-class selects checked checkboxes and radio buttons and selected options. Because it reflects the current state of the control, CSS can automatically respond when a user changes a selection.

The next tutorial covers the :disabled pseudo-class, which selects supported elements that are currently disabled.