css3实现自定义checkbox样式（仿elementui）

<label class="zdy-label-checkbox ">
                    <input type="checkbox" />
                    <div class="show-box"></div>
</label>

/* 伪元素法 的checkbox*/
label.zdy-label-checkbox {
  position: relative;
  margin-top: 5px;
  }
   
  label.zdy-label-checkbox input {
  visibility: hidden;
  }
  input:checked+.show-box {/*+:表示元素的下一个元素*/
  background: #409EFF;
  border: 1px solid #409EFF;
  transition: all .25s;
  }
  input:checked:hover+.show-box {/*+:表示元素的下一个元素*/
  background: #6bbbf9;
  border: 1px solid #6bbbf9;
  transition: all .25s;
  }
  input:hover+.show-box {/*+:表示元素的下一个元素*/
  background: #fff;
  border: 1px solid #6bbbf9;
  transition: all .25s;
  }
   
  .show-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 1px;
  border: 1px solid #d8d8d8;
  background: white;
  border-radius: 2px;
  }
   
  .show-box:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 6px;
    height: 9px;
    border: 1px solid white;
    border-width: 0px 2px 2px 0;
    transform: rotate(45deg);
    border-radius: 2px;
  }