Генератор CSS-чекбоксов

Выберите стиль чекбокса, задайте размер и акцентный цвет — инструмент сгенерирует CSS, заменяющий стандартный чекбокс браузера на стилизованный, при этом полностью кликабельный и доступный — без иконочных шрифтов и картинок.

Что это за инструмент?

Стандартные чекбоксы браузера выглядят по-разному в каждом браузере, и их сложно стилизовать напрямую, поскольку их внешний вид рисует операционная система, а не обычный CSS. Стандартный обходной путь — визуально скрыть нативный чекбокс и вместо этого стилизовать соседний элемент, управляемый состоянием :checked чекбокса: сам input остаётся полностью функциональным и доступным, меняется только внешний вид.

Этот инструмент реализует этот паттерн для трёх распространённых стилей: скруглённый квадрат с анимированной галочкой, ползунок-переключатель в стиле iOS и закрашенный круг (похожий на радиокнопку). Кликните по чекбоксу в превью, чтобы увидеть отмеченное состояние, настройте размер и акцентный цвет, затем скопируйте CSS.

Источник: Selectors Level 4, W3C — спецификация, определяющая псевдокласс :checked, на котором основана эта техника.

Зачем его использовать?

Живое кликабельное превью — переключите чекбокс, чтобы увидеть, как выглядят отмеченное и неотмеченное состояния.
Три разных, часто используемых стиля в одном инструменте: квадрат с галочкой, переключатель и закрашенный круг.
Базовый элемент остаётся настоящим <input type="checkbox">, поэтому навигация с клавиатуры, отправка формы и скринридеры продолжают работать как обычно.
Настраиваемые размер и акцентный цвет генерируются прямо в значения CSS, а не оставляются переменными для заполнения.
Не нужны иконочные шрифты, SVG-файлы или картинки — галочка и ползунок нарисованы обычными CSS-границами и псевдоэлементами.
Бесплатно, работает в браузере, без регистрации.

Как использовать

Выберите стиль: скруглённая галочка, ползунок-переключатель или закрашенный круг.
Перетащите ползунок размера, чтобы увеличить или уменьшить чекбокс.
Выберите акцентный цвет — он станет цветом фона и границы отмеченного состояния.
Кликните по чекбоксу на панели превью, чтобы убедиться, что и отмеченное, и неотмеченное состояния выглядят хорошо.
Скопируйте сгенерированный CSS в таблицу стилей и примените к любому <input type="checkbox">, обёрнутому такой же структурой, как в разметке превью.

Пример

Ввод

Стиль: скруглённая галочка · Размер: 24px · Цвет: оранжевый

Результат

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Input чекбокса визуально скрыт; видимый квадрат — это соседний <span>, стилизованный по состоянию :checked инпута, с небольшой повёрнутой границей, которая при отметке рисуется как галочка.

Почему скрывать нативный чекбокс, а не убирать его

Может показаться проще обойтись без настоящего <input> и построить чекбокс только из стилизованного <div> с обработчиком клика, но так теряются поддержка клавиатуры, отправка формы и семантика для скринридеров, которые иначе достаются бесплатно. Паттерн, который генерирует этот инструмент, сохраняет настоящий инпут чекбокса в разметке — просто визуально скрытым через opacity: 0 и перепозиционированным, — поэтому браузер по-прежнему считает его настоящим чекбоксом во всём, что важно, а видимым оформлением занимается соседний элемент.

Три стиля вкратце

Скруглённая галочка: привычный паттерн «квадрат с галочкой», чаще всего используется в полях форм, чекбоксах согласия с условиями и списках множественного выбора.
Ползунок-переключатель: воспринимается как мгновенный переключатель вкл/выкл, а не поле формы — лучше подходит для экранов настроек, чем для списков чекбоксов.
Закрашенный круг: минималистичный внешний вид, похожий на радиокнопку, полезен, когда квадратный чекбокс выглядит визуально тяжело рядом со скруглёнными элементами интерфейса.

Сочетание с остальным интерфейсом

Сгенерированный акцентный цвет влияет только на отмеченное состояние — выберите цвет вашего бренда или кнопок, чтобы чекбокс смотрелся согласованно с остальной страницей. Сочетайте его с тем же border-radius, что используется в других элементах интерфейса, для более цельного вида.

→ Генератор border-radius · Выбор цвета

Часто задаваемые вопросы

Остаётся ли стилизованный чекбокс доступным?

Да — базовый элемент остаётся настоящим <input type="checkbox">, только визуально скрытым, а не удалённым. Он по-прежнему получает фокус, реагирует на клавиатуру (пробел для переключения), и скринридеры корректно его озвучивают, поскольку читают сам инпут, а не стилизованный span рядом.

Почему CSS использует соседний селектор вроде input:checked + .mark?

Поскольку видимый квадрат — это отдельный элемент от настоящего инпута чекбокса, CSS нужен способ стилизовать этот соседний элемент в зависимости от состояния инпута. Комбинатор + выбирает элемент сразу после отмеченного инпута — это стандартная техника создания кастомных стилей чекбоксов и радиокнопок без JavaScript.

Можно ли использовать это в настоящей форме, а не только в демо?

Да — скопируйте сгенерированный CSS и оберните настоящий инпут чекбокса формы такой же структурой, как показано в HTML/превью. Поскольку это по-прежнему нативный чекбокс, он отправляется вместе с формой так же, как и нестилизованный, и работает с вашей существующей логикой валидации.

Почему галочка в скруглённом стиле анимирована?

Короткая анимация масштабирования галочки делает отмеченное состояние более осмысленным и отзывчивым, чем мгновенное появление/исчезновение — это распространённый приём в проработанных UI-чекбоксах. Это небольшое CSS-правило @keyframes, включённое вместе с остальным сгенерированным кодом.

Требует ли стиль переключателя другой HTML?

Нет — все три стиля используют одну и ту же базовую разметку (скрытый инпут чекбокса плюс соседний элемент для видимой формы). Переключение стиля в этом инструменте меняет только CSS-правила, применённые к этой же структуре, поэтому позже можно сменить стиль, не трогая HTML.