1.前言
我做的项目中，很少默认用原生的样式，甚至连下拉框都很少用select框，不过，原生也有原生的好处，来得快，没有什么大问题。如果是自己用html+css去拼接的话，样式会好看一点。不过应人而异了。我还是比较喜欢去拼接一些。那今天就教大家如何在自己的项目中做接地气的checkbox框呢？
2.详情
1.css样式
body{font-family:'微软简行楷'}
ul li{list-style:none; margin:10px;color:#4985d7;}
.myCheck { display: none; }
.myCheck + label { background-color: white; border: 1px solid #d3d3d3; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin-right: 5px; }
.myCheck:checked + label { background-color: #eee; }
.myCheck:checked + label:after { content: "\2714"; }
2.html内容
ul class="cleanfloat">
<li><input type="checkbox" class="myCheck" checked="checked" id="ck1"><label for="ck1"></label>苏</li>
<li><input type="checkbox" class="myCheck" id="ck2"><label for="ck2"></label>小苏</li>
<li><input type="checkbox" class="myCheck" checked="checked" id="ck3"><label for="ck3"></label>苏小苏</li>
<li><input type="checkbox" class="myCheck" id="ck4"><label for="ck4"></label>苏小苏-CSDN</li>
<li><input type="checkbox" class="myCheck" checked="checked" id="ck5"><label for="ck5"></label>苏小苏-checkbox</li>
<li><input type="checkbox" class="myCheck" id="ck6"><label for="ck6"></label>苏小苏的博客</li>
</ul>
3.展示效果
3.总结
大家也可以根据自己的需要，自行变换样式与颜色！