W3docs
en
Log in

CSS :checked Pseudo Class

Use the :checked CSS pseudo-class for selecting and styling <input> and <option> elements. Read about the pseudo-class and practice with examples.

The :checked pseudo-class selects elements that are currently in the checked (selected) state. It applies to only three kinds of elements:

  • <input type="checkbox"> when the box is ticked,
  • <input type="radio"> when the radio button is selected,
  • <option> elements (inside a <select> or <datalist>) that are currently chosen.

Because these controls are toggled "on" and "off" by the user, :checked is a dynamic pseudo-class: the styles you write under it apply only while the control is in the on state, and the browser re-evaluates them the moment the user clicks. This makes it the foundation of CSS-only interactivity — you can build toggles, accordions, tabs, and custom-styled form controls without a single line of JavaScript.

This page covers what :checked matches, how to combine it with sibling combinators to style other elements (most real uses do this), three runnable examples, and the accessibility points to keep in mind.

How :checked works with combinators

:checked on its own can only style the control itself, and native checkboxes/radios are hard to restyle. The real power comes from pairing it with a combinator so a checked input styles a neighbouring element:

  • Adjacent sibling (+) — input:checked + label styles the label that immediately follows a checked input.
  • General sibling (~) — input:checked ~ .panel styles any later sibling, letting one checkbox reveal a whole section.

A common pattern is to visually hide the real input and let the user click a <label> linked to it (clicking a label toggles its associated control). The checkbox stays in the accessibility tree, but you control the visuals through :checked and the label.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

CSS :checked syntax example

:checked {
  css declarations;
}

In the following example, check the checkbox to see how it works.

Example of the :checked selector with the <div> tag:

CSS :checked code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 10px;
        font-size: 20px;
      }
      input:checked + label {
        color: #000;
      }
      input[type="radio"]:checked {
        box-shadow: 0 0 0 4px #8ebf42;
      }
        /* Checkbox element, when checked */
        input[type="checkbox"]:checked {
        box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div>
      <input type="radio" name="my-input" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no" />
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in" />
      <label for="opt-in">Check!</label>
    </div>
  </body>
</html>
Try it Yourself »

Example of the :checked selector with the <table>, <tr>, <th>, <td> tags:

CSS :checked click imitation example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,tr,th,td {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        padding: 8px;
      }
      #toggle {
        display: none;
      }
      .expandable {
        visibility: collapse;
        background: #1c87c9;
      }
      #btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
        visibility: visible;
      }
      #toggle:checked ~ #btn {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Click here!</label>
  </body>
</html>
Try it Yourself »

Example of the :checked selector:

Example of the CSS :checked Pseudo Class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        vertical-align:middle;
      }
      input[type=checkbox] + label {
        color: #999999;
        font-style: normal;
      } 
      input[type=checkbox]:checked + label {
        color: #8ebf42;
        font-style: italic;
        font-weight:bold;
      } 
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <form>
      <input type="checkbox" id="css" name="css" /> 
      <label for="css">Here is CSS example.</label> 
    </form>
  </body>
</html>
Try it Yourself »

So, the :checked pseudo-class can be used for making forms more interactive and for building widgets with hidden inputs and their visible labels.

Common use cases

  • Custom checkboxes and radios. Hide the native control with appearance: none (or by clipping it) and draw your own indicator that reacts to input:checked.
  • Toggle / "show more" panels. A hidden checkbox plus :checked ~ .panel { display: block } expands or collapses content (as in the table example above) with no JavaScript.
  • CSS-only tabs and accordions. Group radio buttons by name, then use input:checked ~ ... to reveal the matching panel.
  • Styling <option> state. option:checked lets you highlight the currently selected item in a <select>.

Accessibility and gotchas

  • Keep the input focusable. Use appearance: none, clipping, or opacity: 0 rather than display: none if you still want keyboard users to reach and toggle the control. display: none removes the input from the tab order entirely.
  • Always pair a control with a <label>. A correctly associated <label> (via for/id) makes the visible text a click and screen-reader target for the control.
  • The styled element must be a sibling that comes after the input. CSS sibling combinators (+, ~) only look forward, so place the input before the elements it controls in the HTML.
  • :checked reflects the live state, not the HTML attribute. Even an element without the checked attribute matches :checked once the user selects it, and one with the attribute stops matching once the user deselects it.

:checked is often combined with other state and form pseudo-classes:

  • :disabled — style controls the user cannot interact with.
  • :required — style fields that must be filled in.
  • :focus and :hover — style interaction states, useful for custom controls.
  • :not() — invert a selection, e.g. input:not(:checked).

See the full list of CSS selectors for more ways to target elements.

Practice

Practice
What is the function of the ':checked' pseudo-class in CSS?
What is the function of the ':checked' pseudo-class in CSS?
Was this page helpful?