`:checked`

Время чтения: меньше 5 мин

Кратко

Псевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок.

С его помощью удобно стилизовать эти элементы в их активном состоянии.

Пример

Чекбокс полупрозрачный. Будем менять прозрачность (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.

Как это понять

Браузер присваивает чекбоксу или радиокнопке псевдокласс :checked, когда они отмечены. Мы можем использовать это для стилизации элемента.

Подсказки

💡 Этот псевдокласс есть только у тех элементов, которые можно отметить: <input type="checkbox">, <input type="radio">.

💡 По задумке должен работать и с <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: #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;
}

Открыть демо в новой вкладке