利用css的：label代替checkbox效果
优点：不需要图片，纯css搞定
缺点：兼容性，IE8以下不支持
直接上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用css改变默认的checkbox样式</title>
</head>
<body>
<div><label><input type="checkbox"><b></b>选择</label></div>
<style>
input[type="checkbox"]{display: none;}
input[type="checkbox"]+b{
display: inline-block;
width: 18px;height: 18px;
border: 1px solid #ccc;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
}
input[type="checkbox"]:checked+b{
background: #f00;border-color: #f00;
}
</style>
</body>
</html>
来源：https://www.cnblogs.com/Jeffrey6024/p/6903048.html