<form class="form" action="">
<div class="wrapper">
<div class="form__line">
<label for="shark" class="form__title-checkbox">Сделал селфи c акулой
<input class="form__checkbox" type="checkbox" id="shark"
name="achievement">
<span class="form__icon-checkbox"></span>
</label>
</div>
<div class="form__line">
<label for="model" class="form__title-checkbox"> Сделал селфи с моделью
<input class="form__checkbox" type="checkbox" id="model" name="achievement">
<span class="form__icon-checkbox"></span>
</label>
</div>
</div>
</form>
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.form__line {
display: flex;
align-items: center;
}
.form__checkbox {
display: none;
}
.form__checkbox:checked+.form__icon-checkbox:before {
opacity: 1;
}
.form__icon-checkbox {
position: relative;
display: block;
float: left;
width: 39px;
height: 39px;
background-color: #fff;
border: 2px solid #e5e5e5;
margin-top: -4px;
}
.form__icon-checkbox::before {
content: "";
position: absolute;
display: block;
top: 50%;
left: 25%;
width: 7px;
height: 18px;
border: solid #d22856;
border-width: 0 3px 3px 0;
transform: rotate(45deg) translate(-50%, -50%);
opacity: 0;
transition: .3s cubic-bezier(0.51, 0.38, 0.67, 0.06);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.