Стиль включенных элементов интерфейса
Описание
Псевдокласс :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
Читайте также
Свойство border-bottom-style
Устанавливает стиль границы элемента.
Свойство margin-top
Устанавливает величину отступа от верхней границы текущего элемента до внутренней границы его род...
Свойство grid-template-rows
Определяет строки сетки с помощью списка значений разделённого пробелами. Значения представляют и...
Свойство perspective-origin
Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно со свойством p...
Правило @document
@document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобил...