Стиль включенных элементов интерфейса
Описание
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента input или пользователем.
Синтаксис
Селектор:checked { ... }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.in-check:checked + span {
background: rgb(255, 174, 0);
}
</style>
<p>
<input type='checkbox' class='in-check' name='a1' /><span>Windows 7</span>
<br />
<input type='checkbox' class='in-check' name='a3' /><span>Windows XP</span>
<br />
<input type='checkbox' class='in-check' name='a4' /><span>System X</span>
<br />
<input type='checkbox' class='in-check' name='a5' /><span>Linux</span>
<br />
<input type='checkbox' class='in-check' name='a2' /><span>Windows Vista</span>
<br />
<input type='checkbox' class='in-check' name='a6' /><span>Mac OS</span>
</p>
</body>
</html>Читайте также
Свойство quotes
Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes по...
Свойство bottom
Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов.
Отсчёт координат зависит от свойства position.
Свойство gap
Устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap....
Свойство margin-right
Устанавливает величину отступа от правой границы текущего элемента до внутренней границы его родительского элемента....