默认的checkbox样子大部分时候都是不尽如人意，看上去都比较丑，单独去找个插件来使用，又不够零活，
用纯css去美化也不是特别如意（处理兼容及样式代码比较多），使用图片的方式还是比较简单
最终效果：
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox css change</title>
<style>
.customcb label{
display:inline-block;
width:120px;
height:50px;
line-height:.8rem;
text-align:left;
position: relative;
cursor:pointer;
}
.customcb label input{
width: 15px;
height: 15px;
vertical-align: bottom;
margin-right:.2rem;
opacity: 0;
}
.customcb .spot{
display:inline-block;
width:24px;
height:24px;
background:url("checkbox-default.png") no-repeat; /*默认的样式图片*/
background-size:24px;
position: absolute;
top:.2rem;
left:0;
z-index:5;
transition:all .1s;
}
.customcb input:checked + .spot{
background:url("checkbox-checked.png") no-repeat; /*选中后的样式图片*/
background-size:24px;
}
</style>
</head>
<body>
<div class="customcb">
<label><input type="checkbox" name="1"><i class="spot"></i>人口密度</label>
<label><input type="checkbox" name="1"><i class="spot"></i>房屋密度</label>
</div>
</body>
</html>
图片来源于：http://iconfont.cn，搜索checkbox（下载的时候设置好大小和颜色）
image.png
radiobox也可以同样的方式实现
