Кратко
Секция статьи "Кратко"Псевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок.
С его помощью удобно стилизовать эти элементы в их активном состоянии.
Пример
Секция статьи "Пример"Чекбокс полупрозрачный. Будем менять прозрачность (opacity
) и цвет текста у чекбокса, когда он отмечен:
<span>Обратный билет</span><label> <input type="checkbox"> <span>Нужен</span></label>
<span>Обратный билет</span> <label> <input type="checkbox"> <span>Нужен</span> </label>
Прозрачность в дефолтном состоянии:
input[type="checkbox"],input[type="checkbox"] ~ span{ opacity: 0.5;}
input[type="checkbox"], input[type="checkbox"] ~ span { opacity: 0.5; }
Чекбокс становится непрозрачным, когда на него кликнули:
input[type="checkbox"]:checked { opacity: 1;}
input[type="checkbox"]:checked { opacity: 1; }
Текст тоже становится непрозрачным, а цвет меняется на синий:
input[type="checkbox"]:checked ~ span { opacity: 1; color: #2E9AFF;}
input[type="checkbox"]:checked ~ span { opacity: 1; color: #2E9AFF; }
Как пишется
Секция статьи "Как пишется"После селектора, который выбирает элемент чекбокса или радиокнопки, ставим двоеточие и пишем ключевое слово checked
.
Как это понять
Секция статьи "Как это понять"Браузер присваивает чекбоксу или радиокнопке псевдокласс
, когда они отмечены. Мы можем использовать это для стилизации элемента.
Подсказки
Секция статьи "Подсказки"💡 Этот псевдокласс есть только у тех элементов, которые можно отметить: <input type
, <input type
.
💡 По задумке должен работать и с <option>
, но поскольку выпадающий список сильно отличается от системы к системе и от браузера к браузеру, то пока работает только в браузере Chrome на Windows. Так что ждём и надеемся, но особо не используем.
На практике
Секция статьи "На практике"🛠 Очень часто этот класс пригождается, когда вы делаете какой-то нестандартный элемент управления на основе чекбокса или радиокнопок. В этом случае стандартные элементы скрываются, но их поведение, в частности псевдокласс
, позволяет что-то переключать вообще без JavaScript.
Например, вот это выпадающее меню реализовано на чистом HTML с использованием трюка в чекбоксом:
<div class="dropdown"> <input type="checkbox" id="menu"> <label for="menu">Выбери черепашку</label> <ul> <li><a href="#">Леонардо</a></li> <li><a href="#">Рафаэль</a></li> <li><a href="#">Донателло</a></li> <li><a href="#">Микеланджело</a></li> <li><a href="#">Боттичелли</a></li> <li><a href="#">Караваджо</a></li> </ul></div>
<div class="dropdown"> <input type="checkbox" id="menu"> <label for="menu">Выбери черепашку</label> <ul> <li><a href="#">Леонардо</a></li> <li><a href="#">Рафаэль</a></li> <li><a href="#">Донателло</a></li> <li><a href="#">Микеланджело</a></li> <li><a href="#">Боттичелли</a></li> <li><a href="#">Караваджо</a></li> </ul> </div>
.dropdown { position: relative;}.dropdown input,.dropdown ul { display: none;}.dropdown label { cursor: pointer; border-bottom: 3px dashed #2E9AFF;}.dropdown ul { position: absolute; left: calc(100% + 25px); top: 50%; transform: translateY(-50%); margin: 0; padding: 40px 10px; list-style: none; background: #FFFFFF; font-size: 20px;}.dropdown a { color: #000000;}.dropdown :checked ~ label { color: #2E9AFF;}.dropdown :checked ~ ul { display: inline-block;}
.dropdown { position: relative; } .dropdown input, .dropdown ul { display: none; } .dropdown label { cursor: pointer; border-bottom: 3px dashed #2E9AFF; } .dropdown ul { position: absolute; left: calc(100% + 25px); top: 50%; transform: translateY(-50%); margin: 0; padding: 40px 10px; list-style: none; background: #FFFFFF; font-size: 20px; } .dropdown a { color: #000000; } .dropdown :checked ~ label { color: #2E9AFF; } .dropdown :checked ~ ul { display: inline-block; }