CSS :checked Selector

What You’ll Learn

The :checked pseudo-class styles form elements that are currently selected or toggled on. It is essential for customizing checkboxes, radio buttons, and toggle UIs.

Introduction

The :checked selector in CSS is a pseudo-class used to style form elements that are checked or selected. It applies while an option remains in its on or chosen state.

This works with <input type="checkbox">, <input type="radio">, and <option> elements inside a <select> dropdown.

Definition and Usage

Append :checked to a selector with no space before the colon: input:checked or input[type="radio"]:checked. Styles apply whenever the element is selected and disappear when it is unchecked.

📝 Syntax

The syntax for the :checked pseudo-class is:

element:checked {
  /* CSS properties */
}

Basic Example

input:checked {
  outline: 2px solid #2563eb;
  accent-color: #2563eb;
}

input[type="radio"]:checked {
  outline: 2px solid #7c3aed;
}

Syntax Rules

• Only elements with a checked/selected state can match :checked.
• Combine with type selectors: input[type="checkbox"]:checked.
• Use input:checked + label to style an adjacent label.
• Use input:checked ~ .panel to reveal sibling content.
• State persists until the user changes the selection.

Related Selectors

• :disabled — styles elements that cannot be interacted with
• :focus — styles when an input has keyboard focus
• :indeterminate — checkbox in a partially selected state
• + and ~ combinators — target siblings of checked inputs

When to Use :checked

:checked is ideal for form selection feedback:

• Custom checkboxes — Highlight the selected state beyond the browser default.
• Radio groups — Emphasize the chosen option in a set.
• Label highlighting — Bold or color the label next to a checked input.
• CSS-only toggles — Show or hide panels with a hidden checkbox and ~.
• Preference forms — Visually confirm newsletter opt-ins and settings.

Examples Gallery

Practice :checked with checkboxes, radio buttons, label styling, and toggle panels.

input[type="checkbox"]:checked {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  accent-color: #2563eb;
}

input[type="radio"]:checked {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  accent-color: #7c3aed;
}

input:checked + label {
  color: #1d4ed8;
  font-weight: 700;
}

label {
  color: #64748b;
  cursor: pointer;
}

.toggle-input {
  display: none;
}

.toggle-panel {
  display: none;
  margin-top: 0.75rem;
  padding: 1rem;
  background: #eff6ff;
  border-radius: 8px;
}

.toggle-input:checked ~ .toggle-panel {
  display: block;
}

⚠️ Common Pitfalls

• Wrong elements — :checked does not apply to text inputs, buttons, or plain divs.
• HTML order — input:checked + label only works when the input comes directly before the label.
• option styling — Browsers limit how option:checked can be styled inside <select>; test across browsers.
• Hidden inputs — If you hide a checkbox for a custom UI, keep it focusable and pair with a visible label for accessibility.

♿ Accessibility

• Real inputs — Keep a native checkbox or radio in the DOM, even if visually hidden, so keyboard and screen reader users can interact.
• Labels — Always associate inputs with <label for="id"> or wrap the input inside the label.
• Do not rely on color alone — Pair color changes with weight, icons, or text for selected states.
• Focus styles — Style :focus alongside :checked for keyboard users.

💡 Best Practices