CssHow-ToBeginner · 3 min read

How to Use :checked in CSS for Styling Checked Inputs

Use the :checked pseudo-class in CSS to target and style checkboxes or radio buttons when they are selected. It applies styles only to inputs that are currently checked, allowing you to change their appearance or related elements dynamically.

📐

Syntax

The :checked pseudo-class selects input elements like checkboxes or radio buttons that are currently checked. It is used in CSS selectors to apply styles only when the input is selected.

input:checked targets any checked input.
You can combine it with attribute selectors like input[type="checkbox"]:checked to be more specific.
It can also be used with sibling selectors to style related elements when the input is checked.

css

input:checked {
  /* styles here */
}

input[type="checkbox"]:checked {
  /* styles here */
}

💻

Example

This example shows how to change the background color of a label when its checkbox is checked using :checked and the adjacent sibling selector +. When you check the box, the label's background turns lightgreen.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>:checked Example</title>
<style>
  input[type="checkbox"] {
    display: none;
  }
  label {
    padding: 0.5rem 1rem;
    border: 2px solid #333;
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
  }
  input[type="checkbox"]:checked + label {
    background-color: lightgreen;
    border-color: green;
  }
</style>
</head>
<body>
  <input type="checkbox" id="agree" />
  <label for="agree">I agree to the terms</label>
</body>
</html>

Output

A checkbox is hidden, and a label is visible. When the user clicks the label, the checkbox toggles. When checked, the label's background changes to light green with a green border.

⚠️

Common Pitfalls

Common mistakes when using :checked include:

Trying to style the checkbox directly without hiding it, which limits visual changes because checkboxes have default OS styles.
Not using a label linked to the input, which makes toggling harder and less accessible.
Using :checked on unsupported elements (it only works on checkboxes, radio buttons, and options).
Forgetting to use sibling or parent selectors to style related elements because :checked only applies to the input itself.

Wrong: Styling the checkbox color directly (most browsers ignore this).

Right: Hide the checkbox and style the label when the checkbox is checked.

css

/* Wrong: This won't change checkbox color in most browsers */
input[type="checkbox"]:checked {
  background-color: green;
}

/* Right: Hide checkbox and style label instead */
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  background-color: green;
}

📊

Quick Reference

Tips for using :checked effectively:

Use :checked only on input[type="checkbox"], input[type="radio"], or option elements.
Combine with sibling selectors like + or ~ to style labels or other elements.
Hide native checkboxes/radios if you want custom styles, then style the label or a custom element.
Always link labels to inputs with for attribute for accessibility.

✅

Key Takeaways

The :checked pseudo-class styles inputs only when selected (checked).

Use sibling selectors to style labels or elements related to the checked input.

Hide native checkboxes/radios to apply custom styles via labels.

Always connect labels to inputs for better usability and accessibility.

:checked works only on checkboxes, radio buttons, and option elements.