This page was translated from English by the community.Learn more and join the MDN Web Docs community.
:checked
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
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" /> <h1>Расширяемые элементы</h1> <table> <thead> <tr> <th>Колонка #1</th> <th>Колонка #2</th> <th>Колонка #3</th> </tr> </thead> <tbody> <tr> <td>[текст ячейки]</td> <td>[текст ячейки]</td> <td>[текст ячейки]</td> </tr> <tr> <td>[текст ячейки]</td> <td>[текст ячейки]</td> <td>[текст ячейки]</td> </tr> <tr> <td>[текст ячейки]</td> <td>[текст ячейки]</td> <td>[текст ячейки]</td> </tr> <tr> <td>[текст ячейки]</td> <td>[текст ячейки]</td> <td>[текст ячейки]</td> </tr> <tr> <td>[текст ячейки]</td> <td>[текст ячейки]</td> <td>[текст ячейки]</td> </tr> </tbody> </table> <p>[какой-то текст примера]</p> <p> <label for="isexpanded">Показать скрытые элементы</label> </p> <p>[другой текст для примера]</p> <p>[какой-то текст примера]</p> </body></html>Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS
Также вы можете псевдокласс:checked, чтобы скрывать радиокнопки для того, чтобы создать, например,галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши.
Спецификации
| Specification |
|---|
| HTML # selector-checked |
| Selectors Level 4 # checked-pseudo |