（转）更改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>
1
2
3
        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")
        }
--------------------- 
作者：zhishi_tudouni 
原文：https://blog.csdn.net/zhishi_tudouni/article/details/78784207