自定义常用input表单元素一：纯css 实现自定义checkbox复选框

<input type="checkbox" id="my_checkbox1" class="my_checkbox">
<label for="my_checkbox1" class="checkbox_label">自定义的复选框</label>

/*
*自定义的checkbox
*/

/*设置复选框描述文字为相对定位，因为下面要在此label下面设置两个伪类，基于它进行定位。*/
label.checkbox_label {  
    position: relative;
    display: inline-block;
    padding: 2px 9px;
    -webkit-user-select: none;
    user-select: none; /*禁止选中label中的文字，因为勾选时双击了很容易选中*/
}
/*隐藏原生的input复选框*/
.my_checkbox {
    opacity: 0;
}
/*after伪类生成固定大小的选框，边框颜色设置为灰色，定位到隐藏的checkbox位置上*/
label.checkbox_label::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: -15px;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}
/*原生checkbox hover时，此时自定义的伪类选框边框颜色变化为蓝色*/
.my_checkbox:hover+label.checkbox_label::after {
    border-color: #1890ff;
}
/*原生的checkbox选中后，对应的自定义选框添加边框颜色和背景颜色*/
.my_checkbox:checked+label.checkbox_label::after {
    border-color: #1890ff;
    background-color: #1890ff;
}
/*生的checkbox选中后，由于自定义的选框背景为纯色，故这里又定义了一个before伪类来模拟勾选的对勾，这里用一个盒子的边框模拟对勾选中符号*/
.my_checkbox:checked+label.checkbox_label::before {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #fff;
    background-color: #1890ff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 5px;
    left: -10px;
    z-index: 2;
    box-sizing: border-box;
}

<label for="my_checkboc">           
        <input type="checkbox" id="my_checkboc" class="my_checkbox">
        <!--增加的一个自定义复选框元素span只要在其上应用样式-->
        <span class="new_checkbox"></span>
         复选框1
</label>

label {
    position: relative;
}

label .new_checkbox {
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: 2px;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

label .new_checkbox:hover {
    border-color: #1890ff;
}

.my_checkbox {
    opacity: 0;
}

.my_checkbox:checked+span {
    border-color: #1890ff;
    background-color: #1890ff;
}

/*关联checkbox的值*/
.my_checkbox:checked+span::before {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #fff;
    background-color: #1890ff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 4.5px;
    box-sizing: border-box;
}