CSS :checked Pseudo Class

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

Radio and checkbox elements can be toggled "on" and "off" by the user.

Version

CSS3

Syntax

:checked {
css declarations;
}

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

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>

Another example with :checked selector:

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>



Related articles