/ ↲
    Расширенный поиск

    CSS

    :checked

    Псевдокласс, который отражает состояние чекбокса или радиокнопки.

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. Как это понять
    5. Подсказки
    6. На практике
      1. Алёна Батицкая советует

    Кратко

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

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

    Пример

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

    Читайте также