Использование :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>

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

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты