Анимированные чекбоксы и радио-кнопки

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

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

При выборе какого-то пункта у чекбоксов или радиокнопок мы будем анимировать 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, но, не волнуйтесь: с современными браузерами проблем не будет.

Вот несколько скриншотов стилей:

Обводим радиокнопку

Классическая галочка

Закрашиваем кружок

Посмотрите на представленные примеры и смело внедряйте их в проекты.