Путь задачи / от ввода к результату
Как создать переключатель на чистом CSS
- 01
Задайте размеры дорожки
Установите «Ширина дорожки» от 44 до 128 px и «Высота дорожки» от 24 до 64 px. Ширина должна превышать высоту минимум на 8 px, чтобы ползунку было куда двигаться. Значение по умолчанию 64 × 34 px повторяет пропорции большинства мобильных переключателей.
- 02
Подгоните ползунок
Выберите «Размер ползунка» от 16 до 56 px. Он должен помещаться внутри дорожки — не больше высоты дорожки минус 4 px, — иначе статус меняется на ПРОВЕРЬТЕ ЗНАЧЕНИЯ с точной формулировкой нарушенного правила.
- 03
Раскрасьте оба состояния
Выберите «Неактивная дорожка» для выключенного положения и «Активная дорожка» для включённого. Сам ползунок остаётся белым с небольшой мягкой тенью, поэтому обоим цветам дорожки нужен лишь контраст с белым.
- 04
Просмотрите переход
Переключите «Показать активное состояние», чтобы увидеть, как ползунок скользит, а дорожка меняет цвет с настоящим таймингом 180 мс. Отступ вокруг ползунка вычисляется как половина оставшейся высоты дорожки, поэтому посадка остаётся ровной при любом выбранном размере.
- 05
Скопируйте или скачайте CSS
Нажмите «Копировать CSS» или «Скачать .css», чтобы сохранить toolars-switch.css. Белый ползунок проходит вычисленное расстояние между состояниями, а экспорт с самого начала включает обработку фокуса и reduced-motion. Панель вывода показывает живое число байт — видно, насколько компактным остаётся компонент.
- 06
Соберите разметку
Поместите чекбокс-input, за которым следует элемент .switch-track, внутрь обёртки .switch — строго в этом порядке: соседний селектор зависит от него. Input сжимается до невидимого бокса 1 px, но остаётся фокусируемым, а фокус рисует контур 3 px в вашем цвете «Активная дорожка».