27 июн 2017 • ~ на 5 мин. • CSS • css, анимация, шпаргалка,

checkbox в стиле Google Material Design на CSS3

Создание checkbox'ов в стиле Google Material Design на чистом CSS3

Относительно неддавно я уже описывал метод создания полей ввода input в стиле Google Material Design. Будет желание, загляните и туда. Ну, а сегодня у нас на очереди checkbox’ы. И начнем на этот раз с результата работы.

Результат работы

See the Pen Google Material Design (checkbox) by Migo Userlife (@migo_userlife) on CodePen.

А теперь, собственно сами этапы.

1. HTML-разметка

HTML будет довольно простым. Для примера, Нам потребуется несколько input’ов типа checkbox. Вот они:

<div class="input_checkbox_list">
  <div class="checkbox_item">
    <input type="checkbox" id="check1" class="input-checkbox">
    <label for="check1">Style 1</label>
  </div>
  <div class="checkbox_item">
    <input type="checkbox" id="check2" class="input-checkbox filled-in">
    <label for="check2">Style 2</label>
  </div>
</div>

Тут у нас есть три компонента, которые нам нужны.

.input-checkbox - это наши чекбоксы. Один из которых имеет еще дополнительный клас filled-in для которого я предусмотрел другую анимацию при выборе такого чекбокса
label Необходимы для отображения подписей для чекбоксов, а также мы будем использовать их псевдоэлементы ::before и ::after при анимации.
.checkbox_item Служит оберткой для чекбоксов и их ярлыков. В данном случае можно обойтись и без них, но при использовании в реальном проекте могут быть очень полезны.

С HTML разобрались, переходим к CSS.

2. Анимирование checkbox’ов

Все CSS-стили разделим на три составные части, это: starting stylings(дефолтные стили) label и animation. Начнем, конечно с дефолтных стилей:

/* STARTING STYLE ======================================= */
.input_checkbox_list {
  position: relative;
}

.input-checkbox {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

Здесь мы скрываем наши дефолтные чекбоксы, поскольку вся визуализация будет построена через соответствующие label. Также устанавливаем .input_checkbox_list позиционирование position:relative; для того, чтобы в дальнейшем иметь возможность размещать прочие элементы относительно этого.

Теперь переходим к стилизации label и их псевдоэлементов:

/* LABEL ======================================= */
.input-checkbox + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}
.input-checkbox + label::before,
.input-checkbox + label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 0;
  border: 2px solid #5a5a5a;
  border-radius: 1px;
  margin-top: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

Здесь я указал параметры для отображения подписей для наших чекбоксов. Также с помощью псевдоэлементов ::before и ::after нарисовал квадратик, который будет заменять наш стандартный чекбокс.

После этого нам остается только прописать стили анимации. Вот они:

/* ANIMATION STYLE 1 ======================================= */
.input-checkbox:not(.filled-in):checked + label::before, 
.input-checkbox:not(.filled-in):checked + label::after {
  top: -4px;
  left: -5px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #5264AE;
  border-bottom: 2px solid #5264AE;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* ANIMATION STYLE 2 ======================================= */
.input-checkbox.filled-in:checked + label::before {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #5264AE;
  background-color: #5264AE;
  z-index: 0;
}
.input-checkbox.filled-in:checked + label::after {
  top: 2px;
  left: 1px;
  width: 6px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

На этом все. Работа завершена, и теперь у нас есть чекбоксы стилизированные под Google Material Design. Есть вопросы? Задавайте в комментариях. Буду рад ответить.