Путь задачи / от ввода к результату
Как создать собственный CSS-чекбокс
- 01
Задайте размер элемента
Галочка масштабируется по пространству внутри границы, а не по внешнему размеру. Предпросмотр и экспорт используют одинаковую форму из CSS-границ. Нажмите на предпросмотр или сфокусируйте его и нажмите пробел, чтобы изменить нативное состояние.
- 02
Сформируйте рамку
Размер элемента — 18–64 px, границы — 1–8 px. Внутри границы нужно оставить не менее 8 px для галочки. Неверное сочетание очищает предпросмотр и отключает экспорт.
- 03
Подберите цвета состояний
Выберите «Цвет границы» для спокойного контура и «Цвет при отметке» для заполненного состояния. Держите «Цвет при отметке» достаточно тёмным, чтобы он контрастировал с белой галочкой поверх него, — галочка всегда белая.
- 04
Просмотрите оба состояния
Переключите «Показать состояние отметки», чтобы сравнить спокойную и заполненную стороны в живом предпросмотре. Галочка появляется за 160 мс с небольшим увеличением — ровно то движение, которое экспортированный CSS воспроизводит между состояниями.
- 05
Скопируйте или скачайте CSS
Нажмите «Копировать CSS» или «Скачать .css», чтобы сохранить toolars-checkbox.css. Набор правил сохраняет настоящий input в основе — appearance: none лишь перерисовывает его — и состояния :focus-visible и :disabled включены в экспорт.
- 06
Сохраните нативную разметку
Примените класс .checkbox прямо к настоящему элементу input и свяжите его с label, как любой другой чекбокс. Фокус с клавиатуры, поведение по клику и объявления вспомогательных технологий продолжают работать, потому что ничего семантического не заменяется. Белый фон в покое — часть правила, поэтому пустое состояние читается и на тонированных поверхностях.