Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.

Набор переключателей CSS с разным дизайном

Нужны переключатели CSS на сайт без использования скриптов? Предлагаем скачать целую библиотеку наработок с использование обычных checkbox`ов.

Почему хочется стилизовать переключатели CSS

Допустим, у Вас на сайте есть поля пользователей, которые подразумевают под собой выбор значений с помощью элементов формы checkbox или radiobox. Стандартное оформление этих элементов пользовательского интерфейсов оставляет желать лучшего и просит передать привет 00-ым года. Конечно, некоторые браузеры стали обращать внимания на унылые переключатели и принялись из версии в версию их модернизировать.

Но классика есть классика и каких-то кардинальных изменений в дизайне переключателей ждать не стоит. Как правило, к стилизации чекбоксов и радиобоксом прибегают с помощью JavaScript. Но так ли это необходимо? Подключение лишних библиотек это всегда дополнительная нагрузка на сайт. Поэтому, оптимальным вариантов будет использование переключателей CSS.

Подключение и использование библиотеки для стилизации чекбоксов и радиобоксов

1. Первое, что нужно сделать, это скачать саму библиотеку — checkboxes.min.css;

2. Привязываем ее к нашему сайту:

<link rel="stylesheet" href="dist/css/checkboxes.min.css">

3. И выбираем понравившееся оформления из списка на странице демонстрации, нажав на кнопку HTML:

<div class="ckbx-style-2">
     <input type="checkbox" id="ckbx-style-2-1" value="0" name="ckbx-style-2">
     <label for="ckbx-style-2-1"></label>
</div>

4. Вставляем HTML-код в необходимое место документа и наслаждаемся стилизованными переключателями!

Скачать файл стилей для переключателя CSS можно по ссылке выше.