CSS cтилизация Checkbox

Когда создаете сайт бывает нужно оформить формы красивыми нестандартными чекбоксами. И в этом обзоре приведем несколько примеров изменения внешнего вида чекбоксов с помощью CSS и JS

Пример №1 метода «Checkbox Hack»

Основан на связи тега label и помещенного в него тега input и события click где input будет менять свое состояние.

CSS код

HTML код Checkbox-а

Инициализация:

Пример №2 метода Checkbox

Подходит для варианта, когда галочка выходит за края элемента выбора чекбокса.

CSS код

HTML код Checkbox-а

Инициализация:

CSS свойство appearance для Checkbox

Основано на CSS свойстве -webkit-appearance, которое отключает стандартное оформление элемента формы и сохраняет его функциональность. Полное описание здесь: developer.mozilla.org.

CSS код

HTML код Checkbox-а

Инициализация:

Пример Checkbox с SVG галочкой

Основано путем скрытия стандартного input type=checkbox и вывода тега label с фоном SVG.

CSS код