Стиль включенных элементов интерфейса
Описание
Псевдокласс :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>Читайте также
Свойство right
Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края ...
Свойство transition-timing-function
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.
transition-timing-funct...
Свойство filter
Применяет художественные эффекты к элементам. Обычно используется для изображений....
Свойство animation-fill-mode
Указывает, как нужно применять стили к объекту анимации до и после ее выполнения....