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