Change checkbox default style, radio default style, CSS implementation customization

The principle is that the label is wrapped by the input and the label is bound, click on the label elements also trigger check, so you can hide the input in the label, to replace the custom picture or custom CSS style.

Custom radio using after pseudo elements
The advantage is to write a label less refreshing, it looks more concise

<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;
        }

Custom Radio Effect Chart

Try to use the picture customization, this time not after pseudo element, add an I tag, set the background picture of the label, check the status of another one.
First prepare two small pictures, of course, the actual production, please merge, or a bunch of small pictures filled with requests, affect the experience.
This is the UI colleagues prepared two small map, not honest directly to use.

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

Customize the CheckBox effect Chart