Вс Май 2018

Эффектный checkbox на CSS без использования Java Script.

Рецепты

Сегодня хочу поделиться с вами интересным эффектом для checkbox, который добавит вашей форме или странице изюминку и не потребует использования Java Script.

Как стилизовать чекбокс я уже рассказывал в одной из своих статей. Если у вас возникнут трудности с пониманием данного рецепта, то рекомендую сначала ознакомиться с рецептом по стилизации checkbox на CSS, так как я буду модифицировать его базовую структуру.

Как работает эффектный checkbox на CSS

В обычном состоянии псевдо-элемент :before выглядит как квадрат.

input[type="checkbox"]:before {
  content: " ";
  width: 16px;
  height: 16px;
  border: 1px solid rgba(153, 153, 153, 0.8);
}

input[type="checkbox"]:before {

content: " ";

width: 16px;

height: 16px;

border: 1px solid rgba(153, 153, 153, 0.8);

}

При активации чекбокса с помощью свойств transition плавно поворачиваем элемент на 45 градусов и изменяем цвет двух границ на прозрачный. Что бы оставшиеся с цветом границы стали похожими на галочку, изменяем длины сторон и добавляем box-shadow для увеличения толщины границ.

input[type="checkbox"]:checked:before {
  width: 14px;
  height: 9px;
  border-color: #d9ab3b;
  border-right-color: transparent;
  border-top-color: transparent;
  box-shadow: inset 0 -1px #bca334, inset 1px 0 #bca334;
  transform: rotate(-45deg);
}

input[type="checkbox"]:checked:before {

width: 14px;

height: 9px;

border-color: #d9ab3b;

border-right-color: transparent;

border-top-color: transparent;

box-shadow: inset 0 -1px #bca334, inset 1px 0 #bca334;

transform: rotate(-45deg);

}

Демонстрация и полный код эффекта checkbox

See the Pen yeLZRw by Konstantin (@fliginskih) on CodePen.0

Рецепты

fliginskih