html代码
<input type="checkbox" name="" id="on" >
<label class="switch" for="on">
<span class="ball"></span>
</label>
css代码
[type='checkbox']{
display: none;
}
.switch{
width: 50px;
height: 20px;
background: #F3F3F3;
display: inline-block;
border-radius: 20px;
}
.switch>.ball{
display: block;
width: 15px;
height: 15px;
border-radius: 15px;
background: #F9F9F9;
border: 2px solid #E5E5E5;
margin: 0px;
}
[type='checkbox']:checked+label{
background: greenyellow;
}
[type='checkbox']:checked+label>.ball{
margin-left: 31px;
}
成品