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)"
                    }
                }
                
            })()