input选择框默认样式修改

input选择框是无法直接修改样式，我们只能间接来改变它样式。

原理：用图片来代替原来的input选择框，原来的input选择框定位到图片上方并让它opacity为0，鼠标点击时用js来改变图片，这样从视觉上就完成了input选择框样式的修改

HTML

<i></i>                
 <input type="checkbox" />
 我已阅读并接受<a href="">《***》</a>
    

CSS

 i {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background: url(../img/user-xy-false.png) no-repeat;
            background-size: cover;
            vertical-align: sub;
        }
        input {
            position: absolute;
            left: -1.7rem;
            top: -.2rem;
            opacity: 0;
            z-index: 1;
        }

JS

用js来改变背景图片

//用户协议背景图
            !(function(){var icon=document.querySelector(".user-xy i");
                var choice=document.querySelector(".user-xy input");
                choice.onclick=function(){
                    if(choice.checked){
                        icon.style.backgroundImage="url(img/user-xy-true.png)"
                    }else{
                        icon.style.backgroundImage="url(img/user-xy-false.png)"
                    }
                }
                
            })()