Красивый checkbox на css
3798
Простой checkbox на сайте выглядит не всегда красива, из-за чего ты постоянно думаешь, а как сделать красивый checkbox с анимацией?.
В этом уроке я вам покажу, как сделать красивый checkbox на css.
Разметка HTML
<label class="box-label">
<input type="checkbox" id="checkbox" checked="">
<span class="box"></span>
</label>
<label class="box-label">
<input type="checkbox" id="checkbox" checked="">
<span class="box"></span>
</label>
<label class="box-label">
<input type="checkbox" id="checkbox" checked="">
<span class="box"></span>
</label>
Css
Первое, что нам нужно сделать в стилях css, это скрыть сам checkbox.
.box-label input[type="checkbox"] {
display: none;
}
При скрытии input, мы все равно сможем нажимать на checkbox. Как? Благодаря label .
Теперь мы можем спокойно стилизовать наш checkbox.
.box-label {
display: inline-block;
margin: 5px;
cursor: pointer;
}
#checkbox:checked + .box::before {
content: "\f14a";
color: #1e88e5;
animation: checkanimate 200ms;
}
.box::before {
content: "\f096";
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-right: 5px;
width: 1em;
display: inline-block;
font-size: 1.6em;
}
Теперь остался последний штрих - добавить анимацию при клике.
@keyframes checkanimate{
0% {transform: scale(0);}
90% {transform: scale(1.4);}
100% {transform: scale(1);}
}