更改checkbox預設樣式、radio預設樣式，CSS實現自訂

原理是被label標籤包裹的input與該label是綁定的，點擊該label內的元素也觸發check，於是可以將標籤內的input隱藏，換上自訂圖片或者自訂css樣式。

利用after虛擬元素自訂radio
好處就是少寫個標籤清爽些，看起來比較簡潔

<label><input name="year" type="radio"><span>2011</span></label><label><input name="year" type="radio" checked><span>2012</span></label><label><input name="year" type="radio"><span>2013</span></label>

        label input[type="radio"] {            appearance: none;            -webkit-appearance: none;            outline: none;            margin: 0;        }        label input[type="radio"]:after {            display: block;            content: "";            width: 12px;            height: 12px;            background: #fff;            border-radius: 50%;            border: 2px solid #bfbfbf;        }        label input[type="radio"]:checked:after {            background: #0593d3;            border: 2px solid #fff;        }

自訂radio效果圖

再試試利用圖片自訂，這次不用after虛擬元素了，多加一個i標籤，對標籤設定背景圖片，check狀態再換一張。
先準備兩張小圖片，當然，實際生產中請合并，不然一堆小圖片塞滿請求，影響體驗。
這是UI同事準備的兩張小圖，不厚道的直接拿來用了..

<label class="custom-checkbox"><input class="check-zhengshe" type="checkbox"><i></i><span>check1</span></label><label class="custom-checkbox"><input class="check-wapian" type="checkbox"><i></i><span>check2</span></label><label class="custom-checkbox"><input class="check-zhengwu" type="checkbox"><i></i><span>check3</span></label>

        .custom-checkbox input[type="checkbox"] {            appearance: none;            -webkit-appearance: none;            outline: none;            display: none        }        .custom-checkbox {            width: 100%;            display: block;            margin: 24px 0;            cursor: pointer;        }        .custom-checkbox input[type="checkbox"] + i {            width: 12px;            height: 12px;            display: inline-block;            margin-right: 12px;            background: url("https://img-blog.csdn.net/20171212172149509?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhpc2hpX3R1ZG91bmk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;        }        .custom-checkbox input[type="checkbox"]:checked + i {            background-image: url("https://img-blog.csdn.net/20171212172212797?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhpc2hpX3R1ZG91bmk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast")        }

自訂checkbox效果圖