Подскажите пожалуйста, как можно сделать такой переключающийся checkbox?
<input type="checkbox" class="supercars-checkbox">
<label for="supercars-checkbox"></label>
Вот мой вариант. Надеюсь помог ^-^
.flip {
position: relative;
display: inline-block;
background-color: transparent;
border: 2px solid pink;
border-radius: 24px;
padding: 4px;
}
input[type="checkbox"] {
display: none;
}
span {
position: relative;
padding: 6px;
display: inline-block;
width: 82px;
text-align: center;
font-family: consolas;
font-weight: 600;
}
.active:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: pink;
border-radius: 24px;
z-index: -1;
transition: .5s;
}
input[type="checkbox"]:checked+label .active:after {
left: 100%;
}
<div class="flip">
<input type="checkbox" id="flip">
<label for="flip">
<span class="active">No</span>
<span>Yes</span>
</label>
</div>
user-select: none !important;