在实际开发中，时长会遇到这样的问题，checkbox默认的样式有点难看，很多的时候，会更具ui设计图，来改变相应的checkbox的样式，这个时候就可以自定义一个样式了。
方法很简单，首先讲默认的checkbox样式隐藏起来，在用两张准备好的图片（选中状态的图片和未选中的图片）作为复选框checkbox的背景图片就行了。
参考代码：
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> input[type=checkbox]{ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; cursor: pointer; margin:0; } input[type=checkbox]{ width:13px; height:13px; background: url(images/check.png); background-size: 100% 100%; } input[type=checkbox]:checked{ background: url(images/checked.png); background-size: 100% 100%; } </style> </head> <body> <div class="modal-body form"> <div class="col-md-7 col-sm-7 col-xs-7"> <input name="circle" type="checkbox" value="2" />周一 <input name="circle" type="checkbox" value="3" />周二 <input name="circle" type="checkbox" value="4" />周三 <input name="circle" type="checkbox" value="5" />周四 <input name="circle" type="checkbox" value="6" />周五 <input name="circle" type="checkbox" value="7" />周六 <input name="circle" type="checkbox" value="1" />周日 </div> </div> </body> </html>
这个时候就能达到自己想要的样式的效果了。
