css更改input单选和多选的样式详解

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}