使用label美化checkbox

<div class="checkbox-append">
    <input type="checkbox" id="all-select" />
    <label for="all-select"></label>
    <span class="all-select-span">全选</span>
</div>

input[type=checkbox] {
   display: none;
}

input[type=checkbox] + label {
   margin: 0 !important;
   cursor: pointer;
   width: 16px;
   height: 16px;
   position: relative;
   display: inline-block;
   border: 1px solid #b1b1b1;
   border-radius: 3px;
   vertical-align: text-bottom;
}

input[type=checkbox]:checked + label {
   background-color: #2D5FAD;
   color: #fff;
   border: 1px solid #b1b1b1;
   border-radius: 3px;
}

input[type=checkbox]:checked + label:after {
   font-family: element-icons;
   content: "\e611";
   color: #fff;
   font-size: 14px;
   padding: 0;
   border-radius: 3px;
   text-align: center;
   line-height: 16px;
}

input[type=checkbox]:disabled +label:after {
   font-family: element-icons;
   width: 16px;
   height: 16px;
   top: 0;
   color: #fff;
   display: inline-block;
   visibility: visible;
   border: 1px solid grey;
   /*padding: 0 3px;*/
   border-radius: 3px;
   background-color: #E9E7E3;
   content: "\e611";
   font-size: 12px;
}
.checkbox-append {
   display: inline-block;
   line-height: 16px;
}