CSS :checked Pseudo-Class

CSS :checked Pseudo-Class

The CSS :checked pseudo-class selects checkboxes, radio buttons, and option elements that are currently checked or selected. It allows you to change their appearance and style related elements based on a user's selection without using JavaScript.

:checked Syntax

:checked {
  property: value;
}

The :checked pseudo-class has no arguments. It can be combined with an element selector to target specific form controls that are currently selected.

Example Syntax

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

This rule changes the accent color of checked checkboxes and radio buttons. The accent-color property controls the appearance of supported native form controls.

How :checked Works

The :checked pseudo-class matches an element according to its current checked or selected state, not simply whether the checked or selected attribute appears in the HTML.

For example, a checkbox may initially have the checked attribute, but the user can clear it. Once cleared, the checkbox no longer matches :checked.

Expected Matching Behavior

Browsers update matching automatically when the selected state changes. JavaScript is not required for ordinary checkbox, radio button, or select interactions.

An indeterminate checkbox is a special case. Its indeterminate state does not automatically change its underlying checked state, so it can match both :checked and :indeterminate.

Elements That Match :checked

In HTML, :checked applies to checkboxes, radio buttons, and selected option elements.

Supported Elements

Checkbox Example

<label>
  <input type="checkbox" checked>
  Receive updates
</label>

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

The checkbox initially matches :checked because the checked attribute sets its default checked state. The user can change that state.

Radio Button Example

<label>
  <input type="radio" name="plan" value="basic" checked>
  Basic
</label>
<label>
  <input type="radio" name="plan" value="premium">
  Premium
</label>

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

Only the currently selected radio button in the group matches :checked. Selecting the other radio button changes which element matches.

Option Element Example

<select name="theme">
  <option value="light">Light</option>
  <option value="dark" selected>Dark</option>
</select>

option:checked {
  font-weight: bold;
}

The selected option matches :checked. However, browsers and operating systems may limit how native option elements can be styled, so the visual result can vary.

:checked vs. :default

The :checked and :default pseudo-classes describe different aspects of a form control.

A checkbox that was initially checked can continue to match :default after the user unchecks it, while it stops matching :checked.

Example

<label>
  <input type="checkbox" checked>
  Enable notifications
</label>

input:default {
  outline: 2px solid #999;
}
input:checked {
  accent-color: #0088cc;
}

The outline identifies the checkbox as the default selection. Its accent color reflects whether it is currently checked.

Practical Uses

The :checked pseudo-class is useful for providing immediate visual feedback when users make selections.

Styling an Associated Label

When an input is placed directly before a label, the adjacent sibling selector can style the label based on the input's checked state.

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

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

The label becomes blue and bold when the checkbox is checked. The + combinator requires the label to immediately follow the input.

Highlighting a Selected Container

The :has() pseudo-class can style a parent element when it contains a checked checkbox or radio button.

<label class="choice">
  <input type="checkbox">
  Include documentation
</label>

.choice {
  display: block;
  padding: 12px;
  border: 2px solid #ccc;
}
.choice:has(input:checked) {
  border-color: #0088cc;
  background-color: #eaf6fc;
}

The entire label receives a highlighted border and background when its checkbox is checked.

Showing Additional Content

A checkbox can control the visibility of nearby content when the HTML elements are arranged to work with sibling selectors.

<input type="checkbox" id="show-details">
<label for="show-details">Show details</label>
<div class="details">
  <p>Additional information appears here.</p>
</div>

.details {
  display: none;
}
#show-details:checked ~ .details {
  display: block;
}

Checking the box reveals the additional content. This technique works for simple visual interactions, but native disclosure elements such as <details> are generally preferable for expandable content because they provide built-in semantics and keyboard behavior.

Best Practices

• Use :checked to style the current selection state rather than testing for the presence of the HTML checked attribute.
• Keep native checkboxes and radio buttons accessible to keyboard and assistive technology users.
• Associate each form control with a descriptive <label> element.
• Use accent-color when you only need to change the color of native checkboxes and radio buttons.
• Do not remove visible focus indicators when customizing controls.
• Use more than color alone to communicate important selection information.
• Remember that <option> styling varies across browsers and operating systems.
• Use :default when you need to identify a control's default selection rather than its current state.

:checked Example

This example uses a checkbox to change the appearance of its label. Select or clear the checkbox to see the styles update immediately.

HTML

<div class="checked-demo">
  <input type="checkbox" id="demo-check">
  <label for="demo-check">Enable notifications</label>
</div>

CSS

.checked-demo {
  padding: 15px;
  border: 1px solid #ccc;
}
.checked-demo input {
  accent-color: #0088cc;
}
.checked-demo label {
  margin-left: 6px;
  color: #555;
}
.checked-demo input:checked + label {
  color: #0088cc;
  font-weight: bold;
}

Browser Result

Check the box below. The label changes from gray to blue and becomes bold. Clear the checkbox to restore its original appearance.

Play in Editor

Browser Support

Baseline: Widely available. The :checked pseudo-class is supported by all modern browsers and has been available across major browser engines for many years.

Support for styling individual form controls can vary, especially for native <option> elements. The selector itself is broadly supported.

For current compatibility information, visit Can I Use? .

Specifications

The :checked pseudo-class is defined in the CSS Selectors specification.

Selectors Level 4 - The :checked Pseudo-Class