<body> <input type="checkbox" id="myCheck"> <label for="myCheck"></label> </body>
#myCheck + label{
background-color: white;
border-radius: 5px;
border:1px solid #d3d3d3;
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 20px;
}
#myCheck:checked + label{ background-color: #eee; } #myCheck:checked + label:after{ content:"\2714"; }
这样我们就大功告成了,但是别忘了,我们要将自带的checkbox
定义为display:none;
这样就可以隐藏自带的复选框了。