В уроке Эффекты для текстовых полей форм мы с вами развлекались с текстовыми полями и при этом незаслуженно забыли про чекбоксы и радио-кнопоки.
Сегодня мы хотим исправить эту досадную ошибку и показать вам какможно анимировать чекбоксы и радио-кнопки чтобы ваша форма не выглядела уныло-статичной.
При выборе какого-то пункта у чекбоксов или радиокнопок мы будем анимировать SVG для создания притягательного эффекта. Плавные переходы для SVG-путей могут не работать во всех браузерах, особенно в их мобильных версиях, тем не менее прогресс не стоит на месте и даже IE становится все лучше и лучше).
Для создания собственного чекбокса или собственной радиокнопки мы используем псевдо-элемент ::before для тега label и скрываем тег input, задав ему свойство opacity, равное 0
. Поскольку тег input
будет находиться сверху псевдо-элемента, поэтому при клике на нем действие по-умолчанию будет сохраняться. Тег label
мы также сделаем кликабельным задав атрибуту for значения атрибута id
тега input
.
А еще мы воспользуемся мощью JavaScript и добавим необходимые SVG-элементы после тегов input
. Они не будут видны, т.к. их пути пустые, но при выборе какого-нибудь пункта, мы их анимируем с помощью соответствующего плавного перехода.
Вот пример нашей формы:
<form class="ac-custom ac-checkbox ac-cross">
<h2>Статьи на какую тему вам интересны?</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Unity</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Jquery</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Node.js</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">javascript</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Не хочу учиться, хочу жениться</label></li>
</ul>
</form>
Мы используем неупорядоченный (маркированный) список ul с элементами input
и label
. Основные стили для того, чтобы спрятать элементы input
и создать контейнер вокруг псевдо-элементов:
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0,0,0,0.2);
cursor: pointer;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 4px solid #fff;
transition: opacity 0.3s;
}
При выборе какого-то элемента, мы будем анимировать свойство opacity
у "псевдо-чекбокса" и цвет у тега label
:
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}
Как видите, мы используем селектор родства для выбора тега label
и его псевдо-элемента. Чтобы избежать багов в старых браузерах вам может потребоваться добавить тег input
внутрь тега label
, но, не волнуйтесь: с современными браузерами проблем не будет.
Вот несколько скриншотов стилей:
Посмотрите на представленные примеры и смело внедряйте их в проекты.