Заказать обратный звонок
Ответьте на несколько простых вопросов, получите расчет и приятный бонус от веб-студии
Спасибо
за обращение!
за обращение!
Менеджер свяжется с вами в ближайшее время.
Создается он очень просто, примерно так же как стилизация Checkbox, только тут «галочка» двигается в стороны.
Структура точно такая же как и в предыдущем посте.
Не буду вдаваться в подробности. Суть в том что у тега <i> есть фон и псевдокласс :before с кружком на абсолютном позиционировании.
При клике на <label> нажимается checkbox и с помощью тильды (~) мы привязываемся к остальным элементам.
.form-swipe{
position: relative;
display: flex;
align-items: center;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.form-swipe input{
display: none;
}
.form-swipe span{
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #0F1111;
margin-left:16px;
}
.form-swipe i{
position: relative;
top: 0;
left: 0;
min-width: 40px;
width: 40px;
height: 24px;
background: #0F1111;
border-radius: 12px;
transition: all 0.2s ease-in-out;
}
.form-swipe i:after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 12px;
height: 12px;
background-color: #fff;
border-radius:8px;
transition: all 0.2s ease-in-out;
}
.form-swipe input:checked ~ i {
background: #2CAE70;
}
.form-swipe input:checked ~ i:after {
left: 20px;
top: 4px;
width: 16px;
height: 16px;
}
Вот и все. Используется не так часто, но дизайнеры его любят и пихают постоянно.
Комментарии ()