【HTML】
<div class="layui-form-item"><!--一行-->
<label class="layui-form-label">外置接口:</label>
<div class="layui-input-block">
<input type="checkbox" class="toggle-button" id="switch02" name="switch">
<label id="switch" for="switch02" class="button-label">
<span class="circle"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</div>
<div class="layui-form-item"><!--一行-->
<label class="layui-form-label">好友验证:</label>
<div class="layui-input-block">
<input type="checkbox" class="toggle-button" id="switch03" name="switch">
<label id="switch" for="switch03" class="button-label">
<span class="circle"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</div>
<div class="layui-form-item"><!--一行-->
<label class="layui-form-label">好友回复:</label>
<div class="layui-input-block">
<input type="checkbox" class="toggle-button" id="switch04" name="switch">
<label id="switch" for="switch04" class="button-label">
<span class="circle"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</div>
【CSS】
/*
<input type="checkbox" id="toggle-button" name="switch">
<label for="toggle-button" class="button-label">
<span class="circle"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
*/
.toggle-button{ display: none; }
.button-label{
position: relative;
display: inline-block;
width: 75px;/*长条长度*/
height: 25px;/*长条宽度*/
background-color: #ccc;
box-shadow: #ccc 0px 0px 0px 2px;
border-radius: 25px;/*长条两边的圆弧半径*/
overflow: hidden;
}
.circle{
position: absolute;
top: 0;
left: 0;
width: 25px;/*圆圈半径*/
height: 25px;/*圆圈半径*/
border-radius: 50%;
background-color: #fff;
}
.button-label .text {
line-height: 25px;/*文本高度*/
font-size: 18px;/*文本中的字体大小*/
text-shadow: 0 0 2px #ddd;
}
.on { color: #fff; display: none; text-indent: 10px;}
.off { color: #fff; display: inline-block; text-indent: 34px;}
.button-label .circle{
left: 0;
transition: all 0.8s;/*耗时0.8秒*/
}
.toggle-button:checked + label.button-label .circle{
left: 50px;/*圆圈右移动50px*/
}
.toggle-button:checked + label.button-label .on{ display: inline-block; }
.toggle-button:checked + label.button-label .off{ display: none; }
.toggle-button:checked + label.button-label{
background-color: #3CB371;
}