:checked

CSS псевдоклассы :checked CSS находит любые элементы radio (<input type="radio">), checkbox (<input type="checkbox">) или option (<option> внутри <select>), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.

Синтаксис

css

input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Формальный синтаксис

element:checked { стили }

Примеры

Примеры селекторов

css

/* любой "кликабельный" элемент */
:checked {
  width: 50px;
  height: 50px;
}

/* только радиокнопки */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* только чекбоксы */
input[type="checkbox"]:checked {
  display: none;
}

/* только элементы option */
option:checked {
  color: red;
}

input[type="radio"]:checked: Находит, все отмеченные на странице, радиокнопки

input[type="checkbox"]:checked: Находит все отмеченные чекбоксы
option:checked: Находит все отмеченные option

Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS

Псевдокласс :checked применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS-правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку:

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Расширяемые элементы</title>
    <style>
      #expand-btn {
        margin: 0 3px;
        display: inline-block;
        font:
          12px / 13px "Lucida Grande",
          sans-serif;
        text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
        padding: 3px 6px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        background-color: #969696;
        cursor: default;
        border-radius: 3px;
        box-shadow:
          rgba(255, 255, 255, 0.4) 0 1px,
          inset 0 20px 20px -10px white;
      }

      #isexpanded:checked ~ #expand-btn,
      #isexpanded:checked ~ * #expand-btn {
        background: #b5b5b5;
        box-shadow:
          inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
          inset rgba(0, 0, 0, 1) 0 1px 3px,
          rgba(255, 255, 255, 0.4) 0 1px;
      }

      #isexpanded,
      .expandable {
        display: none;
      }

      #isexpanded:checked ~ * tr.expandable {
        display: table-row;
        background: #cccccc;
      }

      #isexpanded:checked ~ p.expandable,
      #isexpanded:checked ~ * p.expandable {
        display: block;
        background: #cccccc;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="isexpanded" />

    <h1>Расширяемые элементы</h1>
    <table>
      <thead>
        <tr>
          <th>Колонка #1</th>
          <th>Колонка #2</th>
          <th>Колонка #3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
      </tbody>
    </table>

    <p>[какой-то текст примера]</p>
    <p>
      <label for="isexpanded" id="expand-btn">Показать скрытые элементы</label>
    </p>
    <p class="expandable">[другой текст для примера]</p>
    <p>[какой-то текст примера]</p>
  </body>
</html>

Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS

Также вы можете псевдокласс :checked, чтобы скрывать радиокнопки для того, чтобы создать, например, галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши.

Спецификации

Specification
HTML Standard # selector-checked
Selectors Level 4 # checked

Совместимость с браузерами

BCD tables only load in the browser