CSS псевдокласс :checked
Используйте псевдокласс CSS :checked для выбора и стилизации элементов <input> и <option>. Узнайте о псевдоклассе и изучите примеры.
Псевдокласс :checked выбирает элементы, которые в данный момент находятся в отмеченном (выбранном) состоянии. Он применяется только к трём видам элементов:
<input type="checkbox">когда флажок установлен,<input type="radio">когда переключатель выбран,- элементы
<option>(внутри<select>или<datalist>), которые в данный момент выбраны.
Поскольку эти элементы управления переключаются пользователем между состояниями «включено» и «выключено», :checked является динамическим псевдоклассом: стили, написанные для него, применяются только когда элемент управления находится в состоянии «включено», и браузер заново вычисляет их в момент щелчка пользователя. Это делает его основой интерактивности только на CSS — можно создавать переключатели, аккордеоны, вкладки и пользовательски стилизованные элементы форм без единой строки JavaScript.
На этой странице рассматривается, что соответствует :checked, как комбинировать его с комбинаторами соседних элементов для стилизации других элементов (в большинстве реальных случаев используется именно это), три рабочих примера и нюансы доступности, которые стоит учитывать.
Как :checked работает с комбинаторами
:checked сам по себе может стилизовать только сам элемент управления, а нативные флажки и переключатели сложно переопределить стилями. Настоящая мощь проявляется при сочетании с комбинатором, так что отмеченный input стилизует соседний элемент:
- Смежный сосед (
+) —input:checked + labelстилизует метку, которая непосредственно следует за отмеченным input. - Общий сосед (
~) —input:checked ~ .panelстилизует любой последующий соседний элемент, позволяя одному флажку раскрыть целый раздел.
Распространённый паттерн — визуально скрыть реальный input и позволить пользователю нажимать на <label>, связанный с ним (нажатие на метку переключает связанный элемент управления). Флажок остаётся в дереве доступности, но внешний вид контролируется через :checked и метку.
Версия
Синтаксис
Пример синтаксиса CSS :checked
:checked {
css declarations;
}В следующем примере установите флажок, чтобы увидеть, как это работает.
Пример селектора :checked с тегом <div>:
Пример кода CSS :checked
<!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>Пример селектора :checked с тегами <table>, <tr>, <th>, <td>:
Пример имитации нажатия с CSS :checked
<!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>Пример селектора :checked:
Пример CSS псевдокласса :checked:
<!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>Таким образом, псевдокласс :checked можно использовать для создания более интерактивных форм и построения виджетов со скрытыми input и их видимыми метками.
Типичные сценарии использования
- Пользовательские флажки и переключатели. Скройте нативный элемент управления с помощью
appearance: none(или обрезкой) и нарисуйте собственный индикатор, который реагирует наinput:checked. - Переключатель / панель «показать ещё». Скрытый флажок плюс
:checked ~ .panel { display: block }разворачивает или сворачивает содержимое (как в примере с таблицей выше) без JavaScript. - CSS-вкладки и аккордеоны без JavaScript. Сгруппируйте переключатели по атрибуту
name, затем используйтеinput:checked ~ ...для отображения соответствующей панели. - Стилизация состояния
<option>.option:checkedпозволяет выделить выбранный в данный момент элемент в<select>.
Доступность и нюансы
- Сохраняйте фокусируемость input. Используйте
appearance: none, обрезку илиopacity: 0вместоdisplay: none, если вы хотите, чтобы пользователи клавиатуры могли достичь элемента управления и переключить его.display: noneполностью убирает input из порядка обхода фокуса. - Всегда сопровождайте элемент управления меткой
<label>. Правильно связанный<label>(черезfor/id) делает видимый текст доступным для нажатия и для программ чтения с экрана. - Стилизуемый элемент должен быть соседом, расположенным после input. CSS-комбинаторы соседних элементов (
+,~) работают только вперёд, поэтому в HTML input должен располагаться перед элементами, которыми он управляет. :checkedотражает текущее состояние, а не HTML-атрибут. Даже элемент без атрибутаcheckedбудет соответствовать:checkedпосле того, как пользователь его выберет, а элемент с атрибутом перестанет соответствовать после того, как пользователь его снимет.
Связанные псевдоклассы
:checked часто сочетается с другими псевдоклассами состояния и форм:
:disabled— стилизует элементы управления, с которыми пользователь не может взаимодействовать.:required— стилизует поля, которые обязательны для заполнения.:focusи:hover— стилизует состояния взаимодействия, полезно для пользовательских элементов управления.:not()— инвертирует выборку, напримерinput:not(:checked).
Смотрите полный список CSS-селекторов для получения дополнительных способов выбора элементов.