更改checkbox默认样式、radio默认样式，CSS实现自定义

原理是被label标签包裹的input与该label是绑定的，点击该label内的元素也触发check，于是可以将标签内的input隐藏，换上自定义图片或者自定义css样式。

利用after伪元素自定义radio
好处就是少写个标签清爽些，看起来比较简洁

<label><input name="year" type="radio"><span>2011span>label>
<label><input name="year" type="radio" checked><span>2012span>label>
<label><input name="year" type="radio"><span>2013span>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>check1span>label>
<label class="custom-checkbox"><input class="check-wapian" type="checkbox"><i>i><span>check2span>label>
<label class="custom-checkbox"><input class="check-zhengwu" type="checkbox"><i>i><span>check3span>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效果图