radio样式修改颜色纯css

之前默认的

image.png

html为：

    
        
        严紧
    
    
        
        一般
    
    
        
        宽松
    

改成

image.png

html为：

即增加 p 标签 和 span 标签

image.png

css为：

//----自定义radio样式
.degreeBox {
    label{
        position: relative;
        p{
            position: absolute;
            width: 13px;
            height: 13px;
            border: 1px #5cb85c solid;
            border-radius: 50%;
            display: block;
            top: 4px;
            left: 0;
        }
    }
}
/*改变选中时的圆点*/
.degreeBox input:checked+p{
    background-color: #fff;
    span{
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #5cb85c;
        left: 1px;
        top: 1px;
    }
}