CSS :checked Pseudo Class

❮ Prev Next ❯

The :checked pseudo-class is used to select elements when they are in the selected state. It only relates to the <input> (only for radio buttons and checkboxes) and the <option> elements.

Checkbox and radio elements can be toggled "on" and "off" by the user.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

:checked {
  css declarations;
}

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

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

<!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:

<!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:

<!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 accessible and building interactive widgets with hidden inputs and their visible labels.