ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

Стилизация checkbox - один html тег на основе css без js.

Стилизация checkbox - один html тег на основе css без js.
Стилизация checkbox - один html тег на основе css без js.
Автор Дмитрий Грозный Дмитрий Грозный 05/09/2018

Всем привет! Рад приветствовать вас в своем блоге!

Тема с checkbox (чекбоксами) наболевшая! 

  • Во-первых, не так много библиотек со стилями. 
  • Во-вторых, способы установки и работа с чекбоксами усложнена. 
  • В третьих, очень тяжело внедрить свой стиль, который требуется по дизайну.

Именно поэтому я хочу закрыть этот вопрос, либо вместе с вами прийти к более идеальному решению.

Внимание! В браузере Firefox я установил стандартные чекбоксы, т.к. данный браузер придерживается правилу: «Нельзя использовать ::after и ::before для элементов, которые не могут иметь содержимое, например <input/>.»

Пример checkbox`ов

В данных примерах, чекбоксы представлены в 4 ёх состояниях. 

  • Не активный
  • При наведении
  • Заблокированный
  • Активный

|«square-default»

|«mark-info-color-dark»

|«mark2-danger-color-dark»

|«switcher-secondary-color-dark»

|«switcher2-turquoise-color»

|«switcher3-info-color»

|«switcher4-warning-color-dark»


Html структура

Когда я разрабатывал данный подход. Я стремился к одному тегу, а именно <input type="checkbox">. Данная реализация отличается от других подходов, где используются дополнительные обременения тегами label, span и классом active, что часто приводит к «съезжанию» верстки.

В моем решении все очень просто! Для стилизации достаточно использовать стандартные псевдо классы :before :after :checked :disabled :not(:checked)

Таким образом, в тег <input> нужно дописать дата атрибут, который превратит стандартный чекбокс в стилизованный. Дата атрибут data-checkbox-theme содержит тему стиля, которую сможете выбрать из списка ниже.

  <input type="hidden" name="name_attribute" value="0">
  <input data-checkbox-theme="mark2-danger-color-dark" type="checkbox" name="name_attribute" value="1">

В предыдущем примере вы видите тег <input type="hidden"> . Это такая хитрость, при помощи которой сможете получить после отправки формы значения true или false. Работает достаточно просто. Если нажат чекбокс, то он перезатирает значение установленное в <input type="hidden"> и устанавливается значение самого чекбокса. Главное чтобы атрибуты назывались одинаково.

Для стандартного применения чекбокса, рекомендую использовать данную структуру:

<label onselectstart="return false" onmousedown="return false">
    <input type="hidden" name="name_attribute" value="0">
    <input data-checkbox-theme="mark2-danger-color-dark" type="checkbox" name="name_attribute" value="1">
    Я согласен с условиями обработки персональных данных
</label>

HTML валидация

Любителям браузерной валидации, путем добавления специального атрибута required="required". Придется добавить небольшую js функцию, иначе выпадет ошибка при отправке формы.

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var checkboxes = document.querySelectorAll('[data-checkbox-theme]');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].addEventListener('invalid', function (event) {
                event.preventDefault();
                var ob = this;
                ob.classList.add('error');
                clearTimeout(this.timeout);
                this.timeout = setTimeout(function () {ob.classList.remove('error');}, 1000);
            });
        }
    });
})();

Данная анонимная функция при выполнении ждет загрузку всех DOM элементов на странице. Затем перебирает все наши чекбоксы и подписывается на событие «oninvalid» (Не пройдена валидация тега input). При срабатывании данного события. Выполняется еще одна анонимная функция, в которой отключается стандартное выполнение валидации браузера и добавляется на 1 секунду к чекбоксу класс error. Стили которого уже заданы в css.

Пример:


Установка. CSS и SCSS

Данные стили скомпилированы с помощью scss, что очень удобно при написании собственных стилей. 

Чтобы установить данную библиотеку стилей, достаточно подключить к себе checkbox-theme.css

Для любителей scss, можете подключить:

Миксины scss просты! Так что можете писать свои на основе моих примеров:

@mixin checkbox-theme-mark($name, $color){
  [data-checkbox-theme="mark-#{$name}"]{
    &:after {
      opacity: 0;
      color: $color;
      transform: translateY(-15px);
    }
    &:disabled {
      opacity: 0.5;
    }
    &:checked:after {
      content: '✔';
      transform: translateY(0px);
      opacity: 1;
    }
    &:checked:before {
      border-color: $color;
    }
    &:hover:not(:checked){
      &:before{
        border-color: mix($color, white, 50%);
      }
    }
  }
}
@include checkbox-theme-mark(danger-color, #ff4444);

Для любителей Yii2 рекомендую установить расширение и добавить в AppAsset depend со стилями чекбокса:

$ composer require grozzzny/depends "dev-master"
class AppAsset extends \yii\web\AssetBundle
{
    ..
    public $depends = [
        'grozzzny\depends\checkbox_theme\CheckboxThemeAsset'
    ];
    ...
}

Примеры. Коллекция checkbox (чекбоксов)

|«square-default»

|«square-danger-color»

|«square-danger-color-dark»

|«square-warning-color»

|«square-warning-color-dark»

|«square-success-color»

|«square-success-color-dark»

|«square-info-color»

|«square-default»

|«square-turquoise-color»

|«square-turquoise-color-dark»

|«square-primary-color»

|«square-primary-color-dark»

|«square-secondary-color»

|«square-secondary-color-dark»


|«mark-default»

|«mark-danger-color»

|«mark-danger-color-dark»

|«mark-warning-color»

|«mark-warning-color-dark»

|«mark-success-color»

|«mark-success-color-dark»

|«mark-info-color»

|«mark-default»

|«mark-turquoise-color»

|«mark-turquoise-color-dark»

|«mark-primary-color»

|«mark-primary-color-dark»

|«mark-secondary-color»

|«mark-secondary-color-dark»


|«mark2-default»

|«mark2-danger-color»

|«mark2-danger-color-dark»

|«mark2-warning-color»

|«mark2-warning-color-dark»

|«mark2-success-color»

|«mark2-success-color-dark»

|«mark2-info-color»

|«mark2-default»

|«mark2-turquoise-color»

|«mark2-turquoise-color-dark»

|«mark2-primary-color»

|«mark2-primary-color-dark»

|«mark2-secondary-color»

|«mark2-secondary-color-dark»


|«switcher-default»

|«switcher-danger-color»

|«switcher-danger-color-dark»

|«switcher-warning-color»

|«switcher-warning-color-dark»

|«switcher-success-color»

|«switcher-success-color-dark»

|«switcher-info-color»

|«switcher-default»

|«switcher-turquoise-color»

|«switcher-turquoise-color-dark»

|«switcher-primary-color»

|«switcher-primary-color-dark»

|«switcher-secondary-color»

|«switcher-secondary-color-dark»

|«switcher2-default»

|«switcher2-danger-color»

|«switcher2-danger-color-dark»

|«switcher2-warning-color»

|«switcher2-warning-color-dark»

|«switcher2-success-color»

|«switcher2-success-color-dark»

|«switcher2-info-color»

|«switcher2-default»

|«switcher2-turquoise-color»

|«switcher2-turquoise-color-dark»

|«switcher2-primary-color»

|«switcher2-primary-color-dark»

|«switcher2-secondary-color»

|«switcher2-secondary-color-dark»


|«switcher3-default»

|«switcher3-danger-color»

|«switcher3-danger-color-dark»

|«switcher3-warning-color»

|«switcher3-warning-color-dark»

|«switcher3-success-color»

|«switcher3-success-color-dark»

|«switcher3-info-color»

|«switcher3-default»

|«switcher3-turquoise-color»

|«switcher3-turquoise-color-dark»

|«switcher3-primary-color»

|«switcher3-primary-color-dark»

|«switcher3-secondary-color»

|«switcher3-secondary-color-dark»


|«switcher4-default»

|«switcher4-danger-color»

|«switcher4-danger-color-dark»

|«switcher4-warning-color»

|«switcher4-warning-color-dark»

|«switcher4-success-color»

|«switcher4-success-color-dark»

|«switcher4-info-color»

|«switcher4-default»

|«switcher4-turquoise-color»

|«switcher4-turquoise-color-dark»

|«switcher4-primary-color»

|«switcher4-primary-color-dark»

|«switcher4-secondary-color»

|«switcher4-secondary-color-dark»


checkbox html тег

Просмотров: 1133

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: