超简单～使用纯css编写自定义多选框

主要实现原理：

使用label加上::after和::before伪类代替input的样式；对勾是通过取旋转border实现

HTML部分>>

    <input type="checkbox" id="ck1" checked>
    <label for="ck1">苹果</label>
    
    <input type="checkbox" id="ck2">
    <label for="ck2">香蕉</label>
    
    <input type="checkbox" id="ck3">
    <label for="ck3">栗子</label>
    
    <input type="checkbox" id="dsb" disabled>
    <label for="dsb">禁用</label>
    
    <input type="checkbox" id="dsb2" disabled class="checked">
    <label for="dsb2">选中禁用</label>

css部分>>

  input[type="checkbox"] {// 隐藏input
    position: absolute;
    visibility: hidden;
  }
  input[type="checkbox"] + label { // label样式 禁止用户选中文字
    cursor: pointer;
    position: relative;
    line-height: 12px;
    user-select: none;
  }
  input[type="checkbox"] + label:not(:nth-of-type(1)) {
    margin-top: 29px;
    margin-bottom: 29px;
  }
  input[type="checkbox"]:checked + label{ // 选中后label文字颜色
    color: #b4a078;
  }
  input[type="checkbox"]:disabled + label { // 禁用后文字颜色和鼠标样式
    cursor: not-allowed;
    color: #999;
  }
  input[type="checkbox"]:checked + label::before{ // 多选框选中后边框的样式--》可以调整此处代码修改选中后的边框样式
    border-color: #b4a078 !important;
    background-color: #b4a078;
  }
  input[type="checkbox"] + label::before{ // 多选框的边框样式--》可以调整此处代码修改边框样式
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    vertical-align: top;
    margin-right: .2em;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
  }
input[type="checkbox"] + label::after{ // 多选框对勾的样式；
    content: "";
    display: inline-block;
    width: 3px; height: 7px;
    border: 1px solid #fff;
    border-top: 0;
    border-left: 0;
    position: absolute;
    left: 4px; top: 1px;
    transform: rotate(45deg) scale(0);
    transition: all .2s ease-in-out;
  }
  input[type="checkbox"]:checked + label::after{// 多选框对勾选中后的样式动画
    transform: rotate(45deg) scale(1);
    transition: all .2s ease-in-out;
  }
  input[type="checkbox"]:disabled + label::before, input[type="checkbox"]:disabled.checked + label::before{ //禁用的多选框样式
    background-color: #f2f2f2;
  }
  input[type="checkbox"]:disabled.checked + label::after{ //禁用的多选框样式(有对勾)
    border-color: #ccc;
    transform: rotate(45deg) scale(1);
  }
    input[type="checkbox"]:not(:disabled) + label:hover::before{ // 可选中的多选框鼠标移入后的样式
    border-color: #b4a078;
  }