Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Делаем качественный кастомный чекбокс

Многие примеры кастомных элементов совершенно не соответствуют проблемам действительности. Начнем с того как в принципе делается кастомный чекбокс и откуда идет необходимость. С необходимость все просто – нативный дизайн чебоксов мало кому нравится и смотрится не очень почти в любом сайте. Теперь как его, собственно, изменить – нативный компонент изменить не получится, каким он родился, таким и помрет, его можно только скрыть. После этого нам нужно как-то продолжить обрабатывать на нем события, для этого нам подойдет тег <label>, который будет передавать событие чекбокс-инпуту и менять его состояние. Таким образом можно сделать любой дизайн чекбокса только на базе стилей. Это только в общем приближении, теперь давайте обсудим как это сделать правильно с учетом разных ситуаций. А то в интернете понапишут всякого, потом не понятно как весь этот код править.

custom-checkbox

Для начала посмотрим на плохой пример такого чекбокса. Как ни странно, но он находится на сайте “стаковерфлов”: https://stackoverflow.com/a/34712423 Разберемся, что же не так на этом примере, понажимайте на чекбоксы и посмотрите какой будет результат:

See the Pen custom checkbox – bad css by Artem Demo (@artemdemo) on CodePen.

Разница между верхней и нижней группой только в размере шрифта. Как вы видите – нижние чебоксы вылезают за рамки и это выглядет ужасно. В чем дело? Проблем в позиции рамки чекбокса и “галочки” они не зависят друг от друга и поэтому съезжают.

А теперь давайте смотреть как лучше всего сделать чекбокс. Во-первых, для простоты перенесем input во внутрь тега label:

При таком подходе нам не нужно будет использовать id и for для того чтобы связать input и label . Далее, для того чтобы отображать галочку нам понадобится дополнительные тег, не стоит для этого использовать оба псеводкласса ::before и ::after. В общем виде это выглядит вот так:

Собственно все необходимые элементы у нас теперь есть, пора переходить к коду.

Для начала нам нужно скрыть сам инпут, потому что ему навесить новый стиль не получится. Ставим позицию в абсолют, что бы не сдвигал текст, видимость устанавливаем в hidden, потому что нам нужен его функционал, но он не должен быть видим пользователю:

Теперь описываем стиль рамки чекбокса. Использовать будем единицы “em”, это относительные единицы шрифта. Таким образом размер чекбокса будет меняться в зависимости от размера шрифта.

Основная работа закончена, теперь осталось обработать состояние “checked” инпута, так что бы чекбокс отображал галочку и все. Полный код примера находится ниже:

See the Pen checkbox by Artem Demo (@artemdemo) on CodePen.

Поделиться:
comments powered by Disqus