自定义复选框checkbox样式

表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的自定义的checkbox样式，来直接上代码

<div  class="checkbox">
          <input type="checkbox" id="myCheck">
    	   <label for="myCheck"></label>
</div>

　下面重点来了，css样式

/* 自定义复选框 */
#myCheck{
	display: none;
}
#myCheck + label{
    background-color: #fff;
    border-radius: 50%;
    border:1px solid #d3d3d3;
    width:38px;
    height:38px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;
}
#myCheck:checked + label{
    background-color: #c30d23;
    color: #fff;
}
#myCheck:checked + label:after{
    content:"\00a0";
    border: 4px solid #fff;
    border-top-width: 0;
    border-right-width: 0; 
    width: 17px;
    height: 12px;
    -webkit-transform: rotate(-50deg);
    position: absolute;
    top:10px;
    left:10px;
}

　　以上一个简单的自定义复选按钮就出来啦，你们直接拿去用就好了