checkbox 复选框美化

复选框美化(可多个结构,只需改id和for):

结构层

<div class="box">
  <input type="checkbox" id="sexTpl" />
  <label class="label" for="sexTpl" chkV="男" nchkV="女" >
    <span class="circle"></span>
  </label>
</div>

<div class="box">
  <input type="checkbox" id="isHotTpl" />
  <label class="label" for="isHotTpl" chkV="是" nchkV="否" >
    <span class="circle"></span>
  </label>
</div>

样式

.box{width:200px;overflow:hidden;margin:30px auto;}
input[type='checkbox']{display:none;}
.label{position:relative;display:block;width:90px;height:40px;background-color:#ccc;border-radius:20px;margin:0px auto;font-size:20px;}
.label::after{content:attr(nchkV);position:absolute;top:8px;right:8px;color:white;}
.label::before{content:attr(chkV);position:absolute;top:8px;left:8px;color:white;display:none;}
.circle{display:inline-block;width:38px;height:38px;background-color:white;border-radius:20px;position:absolute;top:1px;left:1px;z-index:3;transition:left 0.3s ease-out;}

input[type='checkbox']:checked + .label{background-color:pink;}
input[type='checkbox']:checked + .label .circle{left:51px;}
input[type='checkbox']:checked + .label::after{display:none;}
input[type='checkbox']:checked + .label::before{display:block;}

效果图