References

Beginner-friendly references for web development, with live, editable examples.

The CSS :checked selector

Selector CSS All modern browsers Updated
Quick answer

The CSS :checked pseudo-class matches a checkbox, radio button or <option> that is currently checked. Combined with a sibling combinator — like input:checked + label or input:checked ~ .panel — it powers CSS-only toggles, custom switches and show/hide panels with no JavaScript.

Overview

:checked matches a form control in its checked state: a ticked checkbox, a selected radio button, or a chosen <option>. On its own it can style the control, but its real power comes from combining it with the sibling combinators.

Because :checked reflects live state, input:checked + label styles the label next to a ticked checkbox, and input:checked ~ .panel can reveal a panel further down — all responding to user input with no JavaScript at all. This is the engine behind CSS-only custom switches, accordions, tabs and "read more" toggles. The usual trick is to visually hide the real <input> and style its <label> as the control.

Keep accessibility in mind when you do this: hide the input with a visually-hidden technique (not display: none, which removes it from the tab order), and make sure the label is properly associated so keyboard and screen-reader users can still operate it. Pair it with accent-color if you just want to recolor native checkboxes.

Syntax

/* style the label next to a checked box */
input:checked + label {
  font-weight: 700;
  color: #1c7ce9;
}

/* reveal a panel */
#toggle:checked ~ .panel { display: block; }

Example

Live example 
<style>
  .switch { font: 15px system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .switch input { accent-color: #1c7ce9; }
  .switch input:checked + span { color: #1c7ce9; font-weight: 700; }
</style>
<label class="switch"><input type="checkbox" checked><span>Toggle me in the preview</span></label>

Best practices

  • Combine :checked with + or ~ for CSS-only toggles, switches and accordions.
  • Visually hide the real input with a clip technique, not display: none, so it stays keyboard-focusable.
  • Associate every input with a <label> so the control remains operable and accessible.
  • If you only need to recolor native checkboxes, accent-color is simpler than a custom build.

Frequently asked questions

What does :checked do in CSS?
It matches a checkbox, radio button or option that is currently checked, letting you style it or, with sibling combinators, style nearby elements.
How do I make a CSS-only toggle?
Pair :checked with a sibling combinator, e.g. input:checked ~ .panel { display: block; }, and style the input's label as the control.
Does :checked work on radio buttons?
Yes — checkboxes, radio buttons and <option> elements all support :checked.
How do I keep a CSS toggle accessible?
Hide the input with a visually-hidden clip (not display: none) so it stays focusable, and link it to a proper <label>.
::before >