radio样式修改颜色纯css

之前默认的

image.png

html为：

<div class="degreeBox">
    <label class="radio-inline" for="inlineRadio1">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        严紧
    </label>
    <label class="radio-inline" for="inlineRadio2">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" checked>
        一般
    </label>
    <label class="radio-inline" for="inlineRadio3">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
        宽松
    </label>
</div>

改成

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