Почему этот инструмент полезен
Оформите предпочтение «вкл/выкл» как привычный переключатель, сохраняя при этом настоящий флажок для форм, экранных дикторов и управления с клавиатуры.
Дизайн и CSS · работает локально
Генератор доступного переключателя-тумблера CSS
Создайте отзывчивый переключатель на основе флажка с согласованной геометрией дорожки и ползунка, активными цветами и видимой при клавиатурном фокусе подсветкой.
Готово. Ваши рабочие данные остаются в этом браузере.
Как это работает
Размеры дорожки и бегунка проверяются совместно, ход бегунка вычисляется по их разнице, а живой образец остаётся внутри текущей вкладки браузера.
Практический пример
Создайте переключатель уведомлений размером 56 на 30 пикселей, у которого зеленое состояние включения перемещает ползунок шириной 24 пикселя ровно на 26 пикселей по дорожке.
Проверка
Вычисление детерминировано и объясняет ошибки валидации вместо того, чтобы молча изменять неверный ввод.
Граница конфиденциальности
Ввод и вывод остаются на этой вкладке. Копирование и загрузка происходят через API браузера без загрузки на сервер.
Результат паспорта
Каждый запуск сообщает режим инструмента, временную метку и размер входных/выходных данных, чтобы можно было проверить преобразованные данные.