MoreToggles.css – это библиотека на чистом CSS, которая предоставляет большое количество привлекательных переключателей. Вам нужно только добавить название CSS-класса контейнеру div
, а MoreToggles.css сделает все остальное.
Особенности:
- Чистый CSS
- 8 предустановленных стилей
- Идеальное масштабирование
Использование
Добавьте CSS-файл в <head>
вашего HTML-документа
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>
Оберните ваши <input>
и <label>
HTML-элементом div
, добавьте ему CSS-класс mt-*
.
<div class="mt-ios">
<input id="1" type="checkbox" />
<label for="1"></label>
</div>
Или, если не нравится цвет по умолчанию и нужен другой из предустановленных
<div class="mt-ios-red">
<input id="2" type="checkbox" />
<label for="2"></label>
</div>
Подробности настройки и код на GitHub.
Разные варианты предустановленных CSS-классов в More Toggles.css.