MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Синтаксис

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

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

element:checked { стили }

Примеры

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

/* любой "кликабельный" элемент */
: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 правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (открыть это демо).

<!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, чтобы скрывать радиокнопки для того, чтобы создать, например, галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Загрузите это демо как вариант решения.

Замечание: Для аналагично эффекта, но основанного на псевдоклассе :hover и без скрытых радиокнопок, смотрите это демо, взятое со страницы :hover.

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

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение ':checked' в этой спецификации.
Живой стандарт Без изменений.
HTML5
Определение ':checked' в этой спецификации.
Рекомендация Определяет семантику в HTML.
Selectors Level 4
Определение ':checked' в этой спецификации.
Рабочий черновик Без изменений.
CSS Basic User Interface Module Level 3
Определение ':checked' в этой спецификации.
Кандидат в рекомендации Ссылается к Селекторам Уровня 3.
Selectors Level 3
Определение ':checked' в этой спецификации.
Рекомендация Определяет псевдокласс, но не семантику.

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 1.0 (1.7 или ранее) 9.0 9.0 3.1
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 1.0 (1.0) 9.0 9.5 3.1

 

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,