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

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

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

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

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

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