Label checked css: forms — CSS selector for a checked radio button’s label

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• <label>
• Аккордеон меню
• Вкладки на CSS
• Выпадающее меню
• Подсказка в поле формы
• Пользовательские формы
• Псевдокласс :checked
• Спойлер
• Стилизация переключателей
• Стилизация флажков
• Формы в Bootstrap 4
• Элемент label

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Как стилизовать метку, связанную с выбранным радиовходом и отмеченными флажками, с помощью CSS?

Улучшить статью

Сохранить статью

• Последнее обновление: 14 мар, 2022

Улучшить статью

Сохранить статью

HTML-код используется для определения радиокнопки. Радиокнопки позволяют пользователю выбрать только один вариант из списка предопределенных параметров. Элементы управления вводом Radio Button создаются с использованием элемента «input» с атрибутом type, имеющим значение «radio».

В этой статье мы научимся стилизовать метки, связанные с выбранным радио-входом и флажками.

Синтаксис:

HTML используется для определения поля флажка. Флажок отображается в виде квадратного поля, которое отмечено, когда оно активировано. Это позволяет пользователю выбрать один или несколько вариантов из всех ограниченных вариантов.

Теперь мы стилизуем метки радиокнопок и флажков.

Подход

• Сначала мы выберем class/id из div , в котором используется тег label.
• Затем используйте синтаксис:

 .className input[type="radio/checkbox"]: checked + label {
    // Какие свойства нужно изменить
} 

Пример 1: В этом примере мы будем стилизовать метки переключателей:

HTML

Вывод:

Пример 2: В этом примере мы стилизуем метки флажков.

HTML

< html >     < head >      < title >Styling Label Название > < Стиль > . Входной коток [Тип = "Checkbox"]: проверка+label {.0062              цвет фона: зеленый;              цвет: белый;          }      style > head >     < body >      < DIV Класс = «Флажок» > < P >, на котором вы можете говорить? < Вход Тип = «Флажок» Название = «Проверка» ID = "GFG" . 0061                 value = "1" checked>          < label > Hindi label >          < br >          < ввод тип = "флажок" имя "флажок" 0062 value = "2" >          < label > English label >          < br > DIV > Body > 0061 HTML >

Выход:

 /* Соответствует любому проверенному/выбранному радио, флажку или опции */
: проверено {
  поле слева: 25px;
  граница: 1px сплошной синий;
}
 

 :проверено 

 <дел>