Использование :checked

В общем виде :checked применяется следующим образом (пример 1).

Пример 1. Использование :checked

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:checked</title>
  <style>
   :checked {
    border: 2px solid red; /* Параметры рамки */
    color: #fff; /* Цвет текста */
    background: #333; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><input type="radio" name="yesno" checked> Да
   <input type="radio" name="yesno"> Нет</p>
  <p><input type="checkbox" checked> Согласен</p>
  <p><select>
   <option>Леонардо</option>
   <option>Рафаэль</option>
   <option>Донателло</option>
   <option>Микеланджело</option>
  </select></p>
 </body>
</html>

В данном примере встречается флажок, переключатель и список <select>. Псевдокласс :checked указан без селектора впереди, поэтому будет применяться ко всем возможным элементам.

Сами поля форм плохо стилизуются, в частности, в Chrome меняется только цвет текста и фона у <option> (рис. 1а), Firefox вообще никак не меняет стиль элементов (рис. 1б).

ChromeFirefox
a. Chromeб. Firefox

Рис. 1. Поля форм в браузере

Чтобы как-то активно использовать :checked идут на хитрость и стилизуют не сам <input>, а элемент <label>. Для этого сразу после <input> вставляем <label> и связываем эти два элемента с помощью одинакового значения у атрибутов id и for (пример 2).

Пример 2. Использование <label>

<input type="checkbox" id="switch" checked>
<label for="switch">Флажок</label>

Поскольку мы связали между собой эти элементы, то можно щёлкать уже по тексту и флажок будет включаться или выключаться. Теперь <input> и <label> являются смежными элементами, так что в стилях их тоже можно связать между собой.

input[type="checkbox"]:checked + label { … }

Здесь стилевые параметры применяются к элементу <label>, который идёт сразу после элемента <input type="checkbox">, и для которого включен флажок. В примере 3 показано использование :checked для изменения цвета текста.

Пример 3. Смежные селекторы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:checked</title>
  <style>
   [type="checkbox"]:checked + label {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <p><input type="checkbox" id="switch" checked>
   <label for="switch">Флажок</label></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Стилизация <label>

Рис. 2. Стилизация <label>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 19.05.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid