Библиотека для стилизации чекбоксов на чистом css

Представляем на ваш суд отличную легкую библиотеку, созданную lokesh-coder и предназначенную для стилизации и кастомизации чекбоксов на чистом css.

Вот отличный пример, демонстрирующий возможности данной библиотеки:

Стилизация чекбоксов

Преимущества кастомизации чекбоксов и радиокнопок с помощью данной библиотеки:

  • Базовые
    • Фигуры - Квадрат, скругленная, круг
    • Варианты - Стандартный, заполненный, с тонкой обводкой
    • Цвета - primary, success, info, warning и danger
    • Варианты заполнения - заливка или обводка
    • Анимации - плавная, tada, jelly, pulse, с поворотом
  • Переключатель в стиле iOS
  • Адаптивность
  • Отсутствие javascript
  • Кастомный иконочный шрифт
  • Поддержка изображений
  • SVG иконки
  • Возможность переключения между иконками\svg\изображениями 
  • "Блокировка" для input type="checkbox"
  • Поведения - focus, hover, indeterminate
  • Поддержка фреймворков таких как Bootstrap, Foundation, Semantic UI, Bulma ...
  • Кастомизация с помощью SCSS 
  • Поддержка всех современных браузеров, в том числе мобильных устройств
  • Стили для печати

Установка

Установка через npm или yarn

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

После этого добавить pretty-checkbox.min.css в html

Подключение без скачивания через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>

Ручная загрузка

Загрузка исходного кода с GitHub 

SCSS

Также можете подключить pretty-checkbox.scss в ваш главный scss файл

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Использование

Pretty Checkbox имеет множество встроенных стилей:

Название класса Описание
p-default Базовый стиль
p-switch  Переключатель в стиле iOS
p-icon Для вставки иконочного шрифта
p-svg Для вставки svg файла или разметки
p-image Для вставки изображения

И три возможных формы: p-round, p-curve, p-square (по умолчанию)

Пример кастомизированного чекбокса на codepen

See the Pen default pretty-checkbox by Alexey (@leshkacho) on CodePen.

Базовый чекбокс имеет три варианта начертания p-fill p-thick p-outline (по умолчанию)

Эти стили можно комбинировать:

See the Pen basic styles and combines pretty-checboxes by Alexey (@leshkacho) on CodePen.

Рассмотрим checkbox в виде переключателя в стиле iOS

See the Pen KZwoyq by Alexey (@leshkacho) on CodePen.

Вставка иконок, svg, и картинок

<!--Иконочный шрифт-->
	  <div class="pretty p-icon">
		<input type="checkbox">
		<div class="state">
		  <i class="icon fa fa-check"></i>
		  <label>Check me</label>
		</div>
	  </div>
<!--svg-->
	  <div class="pretty p-svg">
		<input type="checkbox">
		<div class="state">
		  <img class="svg" src="file.svg" />
		  <label>Check me</label>
		</div>
	  </div> <!--Так же поддерживается вставка svg с помощью тегов в тело документа-->
<!--Картинка-->
  <div class="pretty p-image">
    <input type="checkbox" />
    <div class="state">
      <img class="image" src="/check.png" />
      <label>Block</label>
    </div>
  </div>

Цветовая схема

Существует 5 основных цветов для отображения чекбокса: p-primary p-success p-warning p-info p-danger

А так же 5 цветов для линии обводки

p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Подробное представление:

See the Pen YYPaOK by Alexey (@leshkacho) on CodePen.

Анимации

See the Pen pretty-checkboxes animation by Alexey (@leshkacho) on CodePen.

Добавление анимация на чекбокс происходит путем добавления описанных в примере классов

Другие возможности

Переключатели

Возможно создание переключателей с заменой текста, иконки только на css!

Происходит это следующим образом

See the Pen toggle pretty-checkboxes by Alexey (@leshkacho) on CodePen.

Можно использовать разные иконки для обоих состояний переключателя

Кастомизация радио-кнопок на чистом css без js

радио кнопки добавляются идентично чекбоксам и с ними работают такие же классы

GitHub проекта Полная документация Скачать архивом с GitHub

Смотрите также

30 бесплатных адаптивных шаблонов
Airy шаблон сайта портфолио фотографа
Показываем фото товара из торговых предложений вместо цвета товара

Группа Вконтакте