之前默认的
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;
}
}
