css关于伪类、伪元素实现checkbox，radio默认样式的修改

• 默认样式的改变主要依靠多张照片的覆盖来实现的，会因为图片而增大加载量，但兼容性好
• 通过label标签和checkbox、radio的联动，修改label的样式实现默认样式的修改

CheckBox的默认样式的修改：此处通过方法一照片的覆盖而实现的

label{
    display: inline-block; /*行内元素变为行内块级元素*/
    width: 14px;
    height: 14px;
    border: 1px solid #dcdee2;
    border-radius: 3px;
    font-size: 0; /*清除间隔*/
    overflow: hidden;
}
label:hover{
    border-color: #dcdee2;
}
label::after{
    content: "";
    display: inline-block;
    width: inherit;
    height: inherit;
    background-color: #2d8cf0;
    transition: all .1s ease-in-out; /*淡入淡出效果*/
    background-position: center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAsElEQVQ4T8WSgQ3CMAwE7zdgExgBJqGMwCaM0A0QE5QRYJNuYGTkRimkJagSVIpUKfnz+22x8NNCPb8HmNkJaCXd3P1XDsysBfZAD+wcUg3IxF74Dmwl9VWAKfGoBTPbuD1Jx3wyc+IECHEHrCKgg5n5/9mtBjDZzgs8W4jHV2Adlx6WO/Iz6vl1b1IGBcjwtlh5uByFWIBcgMbTntrYtykExJcFSc2nVa8a4xzk/4AH75RDESlrmRAAAAAASUVORK5CYII=");
    background-size: 0;
    background-repeat: no-repeat;
    opacity: 0;
}
input:checked+label::after{ /*选中状态时，通过伪类让其显示对勾*/
    opacity: 1;
    background-size: 13px;
}
input{
    display: none;
}

HTML代码：

<input type="checkbox" id="a">
<label for="a"></label>

效果图如下：

Radio默认样式的修改：

label{
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #e5e7e9 ;
	border-radius: 50%;
	position: relative;
    }
 label:hover{
     border-color: #dcdee2;
 }
 label::after{
     content: "";
     display: inline-block;
     width: 0;
     height: 0;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background-color: #2d8cf0;
     border-radius: 50%;
     transition: all .1s ease-in-out;
 }
 input:checked+label::after{
     width: 8px;
     height: 8px;
 }
 input:checked+label{
     box-shadow: 0 0 3px 1px #2d8cf0;
 }
 input{
     display: none;
 }

HTML代码：

<input type="radio" id="a">
<label for="a"></label>

效果图如下：

如有错误，请指出