Стилизация флажков

Для изменения стиля флажков и переключателей мы вообще прячем исходный элемент <input> с помощью значения none у свойства display, а нужный стиль применяем к элементу <label>, связанный с этим <input>. В примере 1 флажок сделан как цветной прямоугольник, внутри которого перемещается белый квадратик (рис. 1). Включенный флажок выглядит как прямоугольник синего цвета с квадратиком слева; выключенный флажок выглядит как прямоугольник серого цвета с квадратиком справа.

Вид флажка

Рис. 1. Вид флажка

Чтобы квадратик плавно перемещался из одного положения в другое, добавлено свойство transition, значением которого выступает время движения, в данном случае полсекунды.

Пример 1. Стилизация флажка

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Флажок</title> <style> .switch input { display: none; /* Прячем исходный флажок */ } .switch label { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ width: 60px; height: 30px; /* Размеры прямоугольника */ background: #9E9E9E; /* Серый цвет фона */ transition: 0.5s; /* Время смены цвета фона */ } .switch label::before { content: ''; position: absolute; /* Абсолютное позиционирование */ background: #fff; /* Цвет фона квадратика */ width: 20px; height: 20px; /* Размеры квадратика */ left: 35px; top: 5px; /* Положение квадратика */ transition: 0.5s; /* Время движения квадратика */ } .switch input:checked + label { background: #1976D2; /* Синий цвет фона */ } .switch input:checked + label::before { left: 5px; /* Квадратик слева */ } </style> </head> <body> <div class="switch"> <input type="checkbox" id="switch"> <label for="switch"></label> </div> </body> </html>

Сам квадратик выводится с помощью псевдоэлемента ::before, который добавляется к селектору label. Это позволяет легко стилизовать элемент, к примеру, сделать его круглым, добавив лишь свойство border-radius.

Автор: Влад Мержевич
Последнее изменение: 20.02.2024