input checkbox 默认样式修改（Chrome&Safari&UC）& div + js 模仿 checkbox

(楼主亲测: Chrome&Safari&UC 中可行，fire&IE 不可行。所以如果你在考虑各种浏览器的兼容性的话，那就用div + js 手动写一个 checkbox吧：见方法二)
方法一：
html:

css:

.input[type="checkbox"]{
    width: 30px;
    height: 30px;
    /* 去除默认样式 */
    -webkit-appearance: none;
    /* 去除外边框 */
    outline:none;
    background-size: 30px 30px;
    background-image: url("./false.png");
}
.input[type="checkbox"]:checked{
    background-image: url("./true.png");
}

效果图1.png

效果图2.png

方法二：
html:

css:

.agreement-select {
    background-image: url("./true.png");
}

.agreement-no-select {
    background-image: url("./false.png");
}

.agreement-ack {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
}

js:

var js_ack = document.getElementsByClassName("js-ack")[0];
js_ack.onclick = function () {
    if (js_ack.className.indexOf("agreement-select") > -1) {
        js_ack.classList.remove("agreement-select");
        js_ack.classList.add("agreement-no-select");
    } else {
        js_ack.classList.remove("agreement-no-select");
        js_ack.classList.add("agreement-select");
    }
};

效果图和上面的一样。