Кастомизация, стилизация checkbox

Вчера делал имплементацию дизайна для одного клиента, так вот, в дизайне был кастомный чекбокс (думаю, не нужно объяснять, что это такое). Порылся в Тырнете, нашел простой способ это сделать.

Прикреплю сразу спрайт с двумя состояниями input. checkboxes

Логика в том, что для чекбокса нужен label, связанный с ним через атрибут for:

С помощью CSS отключаем видимость чекбокса и добавляем для label псевдоэлемент с фиксированными размерами, для которого ставим бекграундом наш спрайт:

Для состояния «checked» просто изменяем позиционирование спрайта.

Как-то так. Конечно, этот прием можно использовать не только для чекбоксов, но и для radio-переключателей.

UPD.: Вот статья, где я обошелся без спрайта — застилил все под iOS ;)

Кастомизация, стилизация checkbox: 3 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *