Эффектный checkbox на CSS без использования Java Script.
Сегодня хочу поделиться с вами интересным эффектом для checkbox, который добавит вашей форме или странице изюминку и не потребует использования Java Script.
Как стилизовать чекбокс я уже рассказывал в одной из своих статей. Если у вас возникнут трудности с пониманием данного рецепта, то рекомендую сначала ознакомиться с рецептом по стилизации checkbox на CSS, так как я буду модифицировать его базовую структуру.Как работает эффектный checkbox на CSS
В обычном состоянии псевдо-элемент:before
выглядит как квадрат.
1 2 3 4 5 6 |
input[type="checkbox"]:before { content: " "; width: 16px; height: 16px; border: 1px solid rgba(153, 153, 153, 0.8); } |
transition
плавно поворачиваем элемент на 45 градусов и изменяем цвет двух границ на прозрачный.
Что бы оставшиеся с цветом границы стали похожими на галочку, изменяем длины сторон
и добавляем box-shadow
для увеличения толщины границ.
1 2 3 4 5 6 7 8 9 |
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