a11y.skipToMainContent
1

Генератор Checkbox

Создавайте настраиваемые чекбоксы с живым предварительным просмотром — выберите стиль галочки, настройте цвета и размеры, а затем скопируйте CSS.

px
px
px

Preview

HTML

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Checkbox Generator

  1. Выберите стиль галочки (галочка, крест, заполнение или минус).
  2. Установите размер, радиус границы и цвета для проверенных / непроверенных состояний.
  3. Скопируйте сгенерированный CSS и примените класс к вашему входу в флажок.

Что такое имя?

Контрольные коробки по умолчанию браузера выглядят по-разному на каждой платформе и их трудно стилизовать. Этот инструмент позволяет вам создать пользовательский флажок с полным контролем над размером, цветами, радиусом границы и самим значком галочки (галочка, крест, заполнение или минус). Весь вывод - чистый CSS - для визуального стиля не требуется JavaScript. Используйте сгенерированный класс CSS в своих формах для последовательного кросс-платформенного просмотра
Advertisement

FAQ

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

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement