Народ, всем привет. Сегодня пройдемся по алгоритму создания переключателя (он же Toogle Switch), который довольно часто используют на сайтах. Он используется для переключения языков, или простых Вкл/Выкл, что довольно удобно в настройках, или настройки корзины (добавить допинги, доставка курьером или почтой и т.д.). И алгоритм у данного метода довольно простой, основанный на простой работе «чекбокса», ведь у него всего два значения – да или нет. В будущем можно усложнить и сделать три или даже больше вариаций, но тогда обычно уже используют кастомные «чекбоксы»...

Что взять за основу? Есть несколько вариантов, например с помощью js добавлять (удалять) класс, который определяет состояние переключателя... Мы сделаем попроще, на чистом css3, правда не гарантирую совместимость с деревянными браузерами. Родитель должен быть независимым Создаем родительский label, который определит ширину и высоту блока, можно определять это внутренним элементом, но не сегодня=) Label я выбрал не просто так, его атрибут "for" поможет нам работать с checkbox, который будет отвечать за состояние переключателя...