Стилизация флажков
Для изменения стиля флажков и переключателей мы вообще прячем исходный элемент <input> с помощью значения none у свойства display, а нужный стиль применяем к элементу <label>, связанный с этим <input>. В примере 1 флажок сделан как цветной прямоугольник, внутри которого перемещается белый квадратик (рис. 1). Включенный флажок выглядит как прямоугольник синего цвета с квадратиком слева; выключенный флажок выглядит как прямоугольник серого цвета с квадратиком справа.
Рис. 1. Вид флажка
Чтобы квадратик плавно перемещался из одного положения в другое, добавлено свойство transition, значением которого выступает время движения, в данном случае полсекунды.
Пример 1. Стилизация флажка
Сам квадратик выводится с помощью псевдоэлемента ::before, который добавляется к селектору label. Это позволяет легко стилизовать элемент, к примеру, сделать его круглым, добавив лишь свойство border-radius.
См. также
- <input>
- <label>
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Выравнивание элементов форм
- Загрузка файлов
- Использование :checked
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Подсказка в поле формы
- Поле для ввода пароля
- Поле для пароля
- Пользовательские формы
- Построение форм
- Псевдокласс :checked
- Скрытое поле
- Спойлер
- Стилизация переключателей
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label