checkbox样式自定义

原理： 隐藏 input 默认的样式 通过label for input 去映射 checkbox 选中和未选中状态的转换；

上代码：

//  html
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox"  v-model="checkStatus" @click="toggle"/>
<label for="checkbox-1-1" class="my-check-label"></label>
//  css
   input[type="checkbox"] {
        opacity: 0;// 隐藏默认样式
        z-index: 2;
     }
      label{
    color: #999;
    font-size: 16px;
    width: 13px;
    height: 13px;
    border: 1px solid #ccc;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 1.5px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
      }
      label.chbox_label:before {
          content: '';
          position: absolute;
          top: 1px;
          left: -22px;
          width: 13px;
          height: 13px;
          border: 1px solid #ccc;
          border-radius: 2px ;
      }
input[type="checkbox"]:checked+label:after {
    content:  "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 13px;
    height: 13px;
    background: url("../../assets/select.png") no-repeat;
    background-size: cover;
    // background-position-x: -2.2px;
    // background-position-y: -2px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

另外：
浏览器 在选择记住密码是会为input 输入框添加一个背景色；去掉背景色代码为：

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill 
     transition: background-color 50000s ease-in-out 0s;
      //背景色透明  生效时长  过渡效果  启用时延迟的时间（时间可以尽量设置长一些）