<div class="checkbox">
<label class="checkbox__label">
<input type="checkbox" class="checkbox__input" />
<div class="checkbox__block"></div>
</label>
<p>
Вы согласны с <a href="http://get-web.site/" target="_blank"> условием соглашения</a>?
</p>
</div>
<div class="checkbox">
<label class="checkbox__label">
<input type="checkbox" class="checkbox__input" />
<div class="checkbox__block"></div>
</label>
<p>
Вы вообще <a href="http://get-web.site/" target="_blank">адекватны</a>?
</p>
</div>
<br>
<br>
<br>
<br>
<div class="checkbox">
<label class="checkbox__label"><input name="plan" type="radio" value="1" checked class="checkbox__input">
<div class="checkbox__block"></div>
<span class="checkbox__name">Radio 1</span>
</label>
<label class="checkbox__label"><input name="plan" type="radio" value="2" class="checkbox__input">
<div class="checkbox__block"></div>
<span class="checkbox__name">Radio 2</span></label>
<label class="checkbox__label"><input name="plan" type="radio" value="3" class="checkbox__input">
<div class="checkbox__block"></div>
<span class="checkbox__name">Radio 3</span></label>
</div>
/* Оформление checkbox */
.checkbox {
display: flex;
align-items: center;
line-height: 22px;
}
.checkbox__label {
height: 40px;
display: inline-flex;
align-items: center;
/* padding-right: 10px; */
}
.checkbox__name {
margin-right: 10px;
}
.checkbox__block {
display: inline-block;
width: 90px;
height: 40px;
background-color: #28262b;
border-radius: 20px;
box-sizing: border-box;
position: relative;
cursor: pointer;
margin-right: 10px;
transition: 0.5s all;
}
.checkbox__block:after {
content: "";
width: 34px;
height: 34px;
background-color: #e19616;
border-radius: 50%;
position: absolute;
left: 4px;
top: 3px;
transition: 0.5s all;
opacity: 1;
transform: scale(1);
pointer-events: none;
}
.checkbox__input {
display: none;
}
.checkbox__input:checked + .checkbox__block {
background-color: rgb(102, 73, 56);
}
.checkbox__input:checked + .checkbox__block:after {
left: 52px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.