CSS :checked Pseudo-class

Definition and Usage

The :checked pseudo-class matches a form control that is on or selected: a checked checkbox, a selected radio button, or a selected option.

Users turn the state on by checking or selecting; they turn it off by unchecking or choosing another option. It is great for custom form look and simple CSS-only toggles.

CSS Syntax

Often combined with a type: input[type="checkbox"]:checked or with a sibling: input:checked + label.

Common Patterns

How to Use :checked

Wire labels correctly, then style the checked state (or its neighbors).

1. Use a real checkbox or radio with a linked <label>.
2. Add :checked styles for the control and/or + label.
3. For toggles, keep the input as a sibling of the content you show/hide.
4. Test with keyboard (Space / arrows) as well as the mouse.

Live Preview

Check the boxes and radios. Labels turn bold blue when the control is :checked.

CSS Examples

Each snippet focuses on :checked. Use Try It Yourself for a live editor.

<style>
  input[type="checkbox"]:checked {
    outline: 2px solid #db2777;
    outline-offset: 2px;
  }
</style>

<label>
  <input type="checkbox"> I agree
</label>

<style>
  input:checked + label {
    color: #2563eb;
    font-weight: 700;
  }
</style>

<input type="checkbox" id="news">
<label for="news">Subscribe</label>

<style>
  .panel { display: none; }
  #more:checked ~ .panel { display: block; }
</style>

<input type="checkbox" id="more">
<label for="more">Show details</label>
<p class="panel">Extra details appear when checked.</p>

Key Takeaways