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

    CSS

    :checked

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

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

    Кратко

    Скопировано

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

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

    Пример

    Скопировано

    Будем менять цвет фона 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="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;
}
    Открыть демо в новой вкладке

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