Стиль включенных элементов интерфейса
Описание
Псевдокласс :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>
Windows 7
Windows XP
System X
Linux
Windows Vista
Mac OS
Читайте также
Свойство padding
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника.
Свойство columns
Универсальное свойство, которое позволяет задать ширину и количество колонок многоколоночного тек...
Свойство grid-column
Сокращение для grid-column-start + grid-column-end <br>grid-column-start / grid-row-start —...
Свойство list-style-position
Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынес...
Правило @keyframes
Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства...