自定义复选框checkbox样式

checkbox默认样式很丑，在开发中涉及到表单的时候总会有需要自定义样式，下面介绍一种简单的方法自定义多选框(checkbox)的样式，采用的方法是用label的样式代替原来的checkbox,将原来的checkbox隐藏，但label和input的选中状态是联动的。

html:

<input type="checkbox" class="checkbox" >
<label for="agree"></label>

css:

.checkbox {
    display: none;
}
.checkbox + label {
    display: block;
    float: left;
    margin-right: .2rem;
    width: .34rem;
    height: .34rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../img/Checkbox_normal.png);
}
.checkbox:checked + label {
    background-image: url(../img/Checkbox.png);
}