input的CheckBox，根据UI给的设计稿，开发出好看的样式

HTML代码

<p class="mtop">
    <input id="confirm" checked type="checkbox"/><label for="confirm"></label>
    <span class="rule-read">
           阅读同意
           <a class="user-rule">《用户注册协议》</a>
     </span>
</p>

css代码

 input[type=checkbox]{ opacity: 0; -webkit-appearance: none;}
 input[type=checkbox]+label{ display: block; width: 0.453rem; height: 0.453rem; overflow: hidden; background: url("ch.png") no-repeat; background-size: 100% 100%; float: left;}
 input[type=checkbox]:checked+label{ background: url("ch1.png") no-repeat; background-size: 100% 100%;}

选中前的状态 ：

ch.png

选中后的状态：

ch1.png