Генератор CSS-чекбокса
Создайте стильный CSS-чекбокс или переключатель — выберите стиль, цвета, размер, радиус углов и скорость анимации, затем скопируйте готовый CSS + HTML. Чистый CSS, доступность с клавиатурой, без JavaScript.
Ввод
Высота квадрата. Стиль переключателя в 1.8 раза шире, чем высоко.
Используется для состояния отмеченного и кольца фокуса клавиатуры.
Цвет границы при отсутствии отметки — цвет дорожки для стиля переключателя.
Галочка, крестик или кнопка переключателя. Игнорируется контуром, который рисует галочку в цвете акцента.
Применяется к квадратным стилям. Заполненный круг и переключатель всегда полностью закруглены.
Длина переходов проверки/отмены (0.05-1s).
Показывается рядом с чекбоксом в HTML-фрагменте. Оставьте пусто для простого элемента управления.
Добавляет namespace к каждому сгенерированному классу, чтобы CSS не конфликтовал с вашей таблицей стилей.
Вывод
Ваш чекбокс будет отображаться здесь.
Реально сгенерированный чекбокс, изолированный в Shadow DOM — нажмите, чтобы увидеть анимацию.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-checkbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "filled",
"size": "24",
"accentColor": "#2563eb",
"borderColor": "#9ca3af",
"checkColor": "#ffffff",
"radius": "6",
"duration": "0.2",
"labelText": "I agree to the terms",
"classPrefix": "io"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-checkbox-generator` tool (CSS Checkbox Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-checkbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS-чекбокса — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор CSS-чекбокса создает стильный чекбокс — или переключатель — как самостоятельный фрагмент CSS + HTML. Выберите стиль, установите цвета, размер, радиус углов и скорость анимации, затем скопируйте оба блока кода прямо в свой проект. Все это чистый CSS: без JavaScript, без шрифта значков, без SVG-спрайта, без каких-либо зависимостей.
Он стилизует настоящий чекбокс, а не поддельный
Большинство фрагментов пользовательских чекбоксов скрывают нативный <input> за пределами экрана и рисуют <span> рядом с ним. Это работает визуально, но отбрасывает все, что браузер дает вам бесплатно. Этот генератор вместо этого устанавливает appearance: none на настоящем <input type="checkbox"> и закрашивает квадрат, галочку и кнопку переключателя с помощью псевдо-элементов ::before / ::after.
Практическое отличие: элемент управления по-прежнему получает фокус клавишей Tab, все еще переключается клавишей Space, все еще отправляет свое значение с окружающей формой и по-прежнему объявляется как чекбокс читателями экрана — без единой строки дополнительной разметки или ARIA.
Каждая сгенерированная таблица стилей также поставляет три вещи, которые обычно пропускают копируемые чекбоксы:
- кольцо
:focus-visibleв вашем цвете акцента, чтобы пользователи клавиатуры могли видеть, где они находятся; - состояние
:disabled(затемненное, курсорnot-allowed); - блок
@media (prefers-reduced-motion: reduce), который отключает переходы и дрожащую анимацию для людей, попросивших свою систему снизить движение.
Шесть стилей
- Заполненный квадрат — классический: квадрат с границей, который заполняется цветом акцента и показывает галочку, нарисованную из повернутой границы.
- Контур — квадрат остается прозрачным; только границы и галочка принимают цвет акцента. Хорошо подходит для темных или занятых фонов.
- Заполненный круг — то же поведение заполнения и галочки в полностью круглом квадрате.
- Переключатель — дорожка в форме капсулы с кнопкой, скользящей при проверке. Разметка все еще является чекбоксом, поэтому работает в формах без изменений.
- Дрожащий отскок — заполненный квадрат с анимацией
@keyframessqueeze-and-stretch при проверке. - Крестик — заполняется цветом акцента и отмечается ✗ вместо ✓ для семантики "исключено" или "удалено".
Как использовать
- Выберите Стиль чекбокса.
- Установите Размер — высоту квадрата в пикселях. Переключатель автоматически в 1.8 раза шире, чем высоко.
- Выберите три цвета: Акцент (состояние отмеченного и кольцо фокуса), Неотмеченный (граница в покое или дорожка переключателя) и Галочка (галочка, крестик или кнопка).
- Отрегулируйте Радиус углов для квадратных стилей и Продолжительность анимации для переходов проверки/отмены.
- Установите Текст метки и, если в вашем проекте уже используются общие имена классов, Префикс класса — каждый сгенерированный класс получает namespace с ним, поэтому правила не могут конфликтовать с вашей существующей таблицей стилей.
- Скопируйте CSS в свою таблицу стилей и HTML в свою разметку.
FAQ
Будет ли это работать внутри <form>?
Да. Стилизуемый элемент является чекбоксом, поэтому отправляет свой name и value точно так же, как не стилизованный. Добавьте name="..." к <input> в сгенерированной разметке.
Как мне использовать несколько на одной странице?
Вставьте CSS один раз и повторно используйте разметку <label> столько раз, сколько хотите — правила основаны на классах, а не на ID. Для двух разных видов на одной странице создайте второй стиль с другим Префиксом класса.
Почему Цвет галочки игнорируется стилем Контур? Контур намеренно держит квадрат прозрачным, чтобы белая галочка была невидима на светлой странице. Этот стиль всегда рисует свою галочку в цвете акцента.
Делает ли Радиус углов что-то для круга или переключателя? Нет — оба всегда полностью закруглены по проекту. Радиус применяется к заполненному квадрату, контуру, дрожащему отскоку и крестику.
Эта инструмент отправляет что-либо? Нет. Фрагмент генерируется в вашем браузере из выбранных вами значений; ничего не отправляется на сервер и не сохраняется.
Связанные инструменты
Нужен другой CSS для форм или компонентов? Генератор CSS-анимации загрузки создает соответствующий спиннер на чистом CSS, Генератор CSS-теней помогает стилизовать карточку, в которой находится форма, а Генератор CSS-анимации Keyframe — это место для создания собственной пользовательской анимации галочки. Чтобы минимизировать готовую таблицу стилей перед развертыванием, пропустите ее через CSS Minifier & Beautifier.