Кратко
СкопированоПсевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок.
С его помощью удобно стилизовать эти элементы в их активном состоянии.
Пример
СкопированоБудем менять цвет фона option, когда он выбран, и заполнять чекбокс или радиокнопку синим, когда они отмечены:
.checkbox:checked + .checkbox-title::after { content: ''; position: absolute; left: 6px; top: calc(50% - 6px); width: 12px; height: 12px; rotate: 45deg; border-radius: 3px; background-color: #2E9AFF;}.radio:checked + .radio-title::before { content: ""; position: absolute; left: 0; top: calc(50% - 12px); width: 25px; height: 25px; background: radial-gradient( circle, #2E9AFF 0%, #2E9AFF 40%, transparent 50%, transparent 100% );}option:checked { background-color: #2E9AFF; color: #18191C;}
.checkbox:checked + .checkbox-title::after {
content: '';
position: absolute;
left: 6px;
top: calc(50% - 6px);
width: 12px;
height: 12px;
rotate: 45deg;
border-radius: 3px;
background-color: #2E9AFF;
}
.radio:checked + .radio-title::before {
content: "";
position: absolute;
left: 0;
top: calc(50% - 12px);
width: 25px;
height: 25px;
background: radial-gradient(
circle,
#2E9AFF 0%,
#2E9AFF 40%,
transparent 50%,
transparent 100%
);
}
option:checked {
background-color: #2E9AFF;
color: #18191C;
}
Как пишется
СкопированоПосле селектора, который выбирает элемент чекбокса или радиокнопки, ставим двоеточие и пишем ключевое слово checked.
Как понять
СкопированоБраузер присваивает чекбоксу или радиокнопке псевдокласс :checked, когда они отмечены. Мы можем использовать это для стилизации элемента.
Подсказки
Скопировано💡 Этот псевдокласс есть только у тех элементов, которые можно отметить: <input type, <input type.
💡 По задумке должен работать и с <option>, но поскольку выпадающий список сильно отличается от системы к системе и от браузера к браузеру, то пока работает только в браузере Chrome на Windows. Так что ждём и надеемся, но особо не используем.
На практике
Скопированосоветует
Скопировано🛠 Очень часто этот класс пригождается, когда вы делаете какой-то нестандартный элемент управления на основе чекбокса или радиокнопок. В этом случае стандартные элементы скрываются, но их поведение, в частности псевдокласс :checked, позволяет что-то переключать вообще без 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-color: #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-color: #FFFFFF;
font-size: 20px;
}
.dropdown a {
color: #000000;
}
.dropdown :checked ~ label {
color: #2E9AFF;
}
.dropdown :checked ~ ul {
display: inline-block;
}
Читайте также
-
Работа с формами
Как обрабатывать формы, валидировать их и отправлять без перезагрузки страницы с помощью JavaScript.