css美化复选框
纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是隐藏原生input，样式定义的过程留给label
以下是实现代码
<html>
<head>
<title></title>
<style>
.box{
width:500px;
margin: 0 auto;
background-color: white;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]+label {
position:relative;
display: inline-block;
width: 20px;
height: 20px;
background: #eee;
vertical-align: bottom;
-webkit-border-radius: 50%;
margin-right: 5px;
-webkit-box-sizing:border-box;
margin-top: 10px;
}
input[type="checkbox"]+label:before{
position: absolute;
content: "";
width: 8px;
height: 4px;
border: 2px solid #f78642;
border-top: none;
border-right: none;
transform: rotate(-45deg);
top: 5px;
left: 5px;
display:none;
}
input[type="checkbox"]:checked+label::before{
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" value="guangpan" name="choose" id="tian">
<label for="tian"></label>
<label for="tian">天龙八部</label>
<input type="checkbox" value="kaiche" name="choose" id="shen">
<label for="shen"></label>
<label for="shen">神雕侠侣</label>
<input type="checkbox" value="laiji" name="choose" id="xiao">
<label for="xiao"></label>
<label for="xiao">笑傲江湖</label>
</div>
</body>
</html>
