Стилизация переключателей
Стилизация переключателей происходит аналогично стилизации флажков — мы скрываем исходный элемент <input>, а вместо него стилизуем элемент, идущий в коде HTML после <input>. При этом обязательно используем <label>, без которого поведение переключателя работать не будет. Поскольку переключатели обычно вставляются группой, то связывать <input> с <label> через идентификатор не очень удобно из-за того, что придётся вводить множество идентификаторов. Так что поступим иначе — вставим <input> внутрь <label>, а после <input> добавим элемент <span>.
<label><input type="radio"><span></span></label>
Вид самого переключателя мы задаём через селектор span, а вид выбранного переключателя через селектор :checked+span. В примере 1 показано создание круглого переключателя с белой точкой по центру.
Пример 1. Стилизация переключателя
Результат данного примера показан на рис. 1. Элемент <span> делаем квадратным, а затем превращаем в круг через свойство border-radius со значением 50%. Для красоты добавляем внутреннюю тень с помощью box-shadow и значением inset. Окончательно соединяем псевдокласс :checked и псевдоэлемент ::before для отображения белой точки у выбранного переключателя.
Рис. 1. Вид переключателя
См. также
- <input>
- <label>
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Выравнивание элементов форм
- Загрузка файлов
- Использование :checked
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Подсказка в поле формы
- Поле для ввода пароля
- Поле для пароля
- Пользовательские формы
- Построение форм
- Псевдокласс :checked
- Скрытое поле
- Спойлер
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label