radio和checkbox的覆盖

radio的样式

//1. radio样式覆盖
input[type=radio]{
    position:relative;
    width: 13px;
    height: 13px;
    line-height: 15px !important;

}
//2.radio添加一个伪类
input[type=radio]:after {
    positions: absolute;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
}
//3.选中状态样式覆盖
input[type=radio]:check:after{
    content: '图标';
    background-color: 颜色;
}

//4.一个伪类不满足，添加第二个伪类
input[type=radio]:after {
    positions: absolute;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
}
input[type=radio]:check:before {
    content: '图标';
    background-color: 颜色;
}

checkbox样式覆盖

input[type=checkbox] {
    position:relative;
    width: 13px;
    hegith: 13px;
    line-height: 15px!important;
    outline:none;
}
input[type=checkbox]:after {
    position: absolute;
    top: 0px;
    left: 0px;
}
input[type=checkbox]:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 13px;
    height: 13px;
}
input[type=checkbox]:check:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 13px;
    height: 13px;
}

总结: 双伪类 一个负责背景色，一个负责边框色。