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" 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 # selector-checked |
| Selectors Level 4 # checked-pseudo |
Совместимость с браузерами
Enable JavaScript to view this browser compatibility table.