看到那些UI框架都是有美化checkbox多选框的，不过大多是图片或者是字体图标。于是就利用label仿了个多选框效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
p{
width: 20px;
height: 20px;
padding: 3px;
margin-left: 50px;
background-color: #88d;
opacity: .6;
border: 1px solid #333;
}
label{
position: relative;
display: block;
width: 100%;
height: 100%;
}
label:after{
position: absolute;
top: 5px;
left: 4px;
content: '';
display: block;
width: 10px;
height: 6px;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(-45deg)
} input:checked + label{
opacity: 0;
}
</style>
</head>
<body>
<p>
<input type="checkbox" id="all" name="">
<label for="all"></label>
</p>
</body>
</html>