最下面那个是之前写的 今天在做项目的时候发现，之前写的貌似还是有点多，起码增加的span标签可以去掉，这样保持和原生相同的结构最好的，仅仅是样式上的变化。今天把项目中的这个给更新上来。下面就直接还是放代码吧，图就不再截取了，因为外观没发生任何变化，仅仅是内在改变了，话说内在的改变，只有你去了解你才知道，人不就是这样吗？
HTML部分：
<input type="checkbox" id="my_checkbox1" class="my_checkbox">
<label for="my_checkbox1" class="checkbox_label">自定义的复选框</label>
下面是CSS样式部分：
/*
*自定义的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下的伪类生成，一个生成复选框的方框，一个生成复选框的勾选符号即可。然后根据原生checkbox的checked值进行切换选中和未选中的样式。
下面的是之前写的，多写了span 。。。。。。
------------------------------------------------长长长长的分割线----------------------------------------------------------继续分割-------------------------------------------------------------该结束了吧-------------------------------------------------------
话不多说，直入主题。众所周知原生的checkbox复选框、radio单选按钮、select选择框，不同浏览器差别较大，最重要的一点是不怎么好看，如果直接拿原生用，可能会影响整体的美观。项目中用的第三方UI这些都已经很完备，但是在小型项目不想采用第三方UI或者使用的是Bootstrap等没有定制的checkbox样式时，就需要自己去做一个对应的复选框了。本次本着让你改动最小的情况下用纯CSS做了一些自定义的，相对美观的input特殊元素，本节为自定义复选框checkbox。如下图：
下面直接放代码：
HTML部分：
<label for="my_checkboc">
<input type="checkbox" id="my_checkboc" class="my_checkbox">
<!--增加的一个自定义复选框元素span只要在其上应用样式-->
<span class="new_checkbox"></span>
复选框1
</label>
注意，这个HTML结构，label标签最外层，里面包含一个原生checkbox和一个需要自定义样式的span，用来定义checkbox样式。
CSS部分：
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;
}
定义好span的样式，定位到合适的位置，对原来的checkbox设置透明的为0，这样样式部分就可以了。下一步就是把点击选中加进去。由于lable和checbox时绑定的，故点击label区域，即可将改checkbox选中，此时需要对自定义的span添加选中样式即可。用css “+”选择器，如代码中所示，在checkbox选中时，其后一个span元素将会添加：before伪类，显示选中的图标。图中的选中对勾图标为只有有边框和下边框的长方体旋转而成。
如有疑问请留言，这个时暂时这样写，后面会更新，以及相关的纯css打造的radio复选框和js打造的select单选框，供大家参考。