Генератор CSS-переключателя
Создайте чистый переключатель CSS — настоящий флажок в стиле :checked, без JavaScript. Установите размер, цвета, радиус границы и скорость анимации, выберите имя класса с областью видимости и скопируйте доступный HTML + CSS.
Ввод
Стиль
Ограничено половиной высоты — оставьте высоким для таблетки, опустите на 0 для квадратного переключателя.
Цвета
Игнорируется контурным стилем, где кнопка принимает цвет включения/отключения сама по себе.
Поведение и разметка
Автоматически отключается для посетителей, которые предпочитают уменьшенное движение.
Созданные правила ограничены этим классом, поэтому они не будут конфликтовать с вашими собственными стилями.
Оставьте пусто для переключателя без видимого ярлыка.
Вывод
Ваш переключатель появится здесь.
Реальный созданный компонент, изолированный в Shadow DOM — щелкните, чтобы увидеть анимацию.
Ваш переключатель появится здесь.
Копия с встроенными стилями двух состояний выше — удобно для макета. Не интерактивный.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-switch-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "track",
"width": "56",
"height": "32",
"borderRadius": "40",
"offColor": "#cbd5e1",
"onColor": "#22c55e",
"knobColor": "#ffffff",
"transition": "250",
"knobShadow": "true",
"className": "io-switch",
"labelText": "Enable notifications"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-switch-generator` tool (CSS Toggle Switch Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-switch-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-переключателя создает переключатель в стиле iOS из настоящего <input type="checkbox"> и только CSS. Установите размер, цвета, радиус угла и скорость анимации, и вы получите HTML, таблицу стилей и живой просмотр обоих состояний.
В выводе нет JavaScript. Переключатель переключается из-за селектора соседних элементов :checked, что означает, что он работает с клавиатурой, отправляется с формой и деградирует до простого флажка на чем-либо, что не может его стилизировать.
Как использовать
- Выберите Стиль переключателя — см. ниже, что меняет каждый.
- Установите Ширину, Высоту и Радиус границы. Оставьте радиус высоким для таблетки, опустите на 0 для квадратного переключателя.
- Выберите цвета Отключения, Включения и Кнопка.
- Установите продолжительность Анимации, переключите тень кнопки и введите Имя класса.
- Скопируйте HTML в вашу разметку и CSS в вашу таблицу стилей.
Три стиля
- Дорожка — кнопка находится внутри дорожки, смещена на одну восьмую высоты. Это классический переключатель iOS.
- Тонкий — дорожка представляет собой тонкую полоску, а кнопка выше нее, нависая сверху и снизу. Это форма Material Design.
- Контур — дорожка прозрачна с цветной границей, и кнопка принимает цвет включения/отключения. Хорошо для минималистичных интерфейсов или темного режима.
Все остальное — размер, цвета, радиус, время — применяется ко всем трем, поэтому любой из них может быть значительно отклонен от значения по умолчанию.
Доступен ли созданный переключатель?
Да, и это то, где созданный переключатель обычно терпит неудачу. Выход сохраняет настоящий фокусируемый флажок (визуально скрыт, никогда не display: none, что удалит его из порядка табуляции), добавляет role="switch", рисует контур :focus-visible так что пользователи клавиатуры могут видеть, где они находятся, стилизирует состояние :disabled и оборачивает анимацию в блок prefers-reduced-motion: reduce, который отключает переход для посетителей, которые запрашивают меньше движения.
Будет ли CSS конфликтовать с моими существующими стилями?
Каждый селектор ограничен именем класса, которое вы выбираете, используя именование в стиле BEM __input / __track / __label. Ничто не нацеливается на простой элемент, поэтому вставка в существующую таблицу стилей не коснется ничего другого. Если io-switch уже занято, введите другое имя и весь блок будет переименован.
Почему предварительный просмотр статический?
Предварительный просмотр визуализирует оба состояния рядом с встроенными стилями, чтобы вы могли быстро их сравнить. Настоящее правило :checked и псевдо-элемент ::before не могут находиться в атрибуте style — интерактивная версия — это HTML + CSS, который вы копируете.
Что если мне нужно что-то другое, чем переключатель?
Для простого оформленного флажка или переключателя Генератор HTML-флажков производит разметку. Чтобы точно настроить форму, используйте Генератор радиуса границы CSS, а для тени падения кнопки Генератор тени коробки CSS дает вам гораздо больше контроля. Выбор цветов включения/отключения, которые хорошо читаются вместе, легче с помощью Смешиваемой цвета.