Стиль включенных элементов интерфейса
Описание
Псевдокласс :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>Читайте также
Свойство font-variant
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ измене...
Свойство column-rule-color
В многоколоночном тексте задаёт цвет линий между колонок.
Если такой цвет явно не указан, то цвет текста в колонках и цвет линий между ними совпада...
Стили к элементам на основе нумерации
Псевдокласс :nth-child задаёт правила стилей для элементов, которые не содержат указанный селектор....
Свойство margin-right
Устанавливает величину отступа от правой границы текущего элемента до внутренней границы его родительского элемента....