input标签type=radio样式调整起来有点变态,所以我们通常会选择用label标签绑定radio,然后调整label标签的样式,达到自定义样式的目的。
这里写了一个小例子:
<div class="radio-box">
<input type="radio" name="is_raise" value="0" id="raise0" />
<label for="raise0"></label><span>尚未筹款</span>
</div>
<div class="radio-box">
<input type="radio" name="is_raise" value="1" id="raise1" />
<label for="raise1"></label><span>已经在筹款</span>
</div>
这里书写样式:
.radio-box {
display: inline-block; float: left; margin-right: 20px;
}
.radio-box >span {
display: inline-block; vertical-align: baseline; color: #888;
}
.radio-box label {
margin-right: 5px; display: inline-block; vertical-align: text-bottom;
}
input[type="radio"] + label::before {
content: "\a0"; display: inline-block; vertical-align: middle; font-size: 18px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #333; line-height: 1;
}
input[type="radio"]:checked + label::before {
background-color: #fff; background-clip: content-box; border: 5px solid #888; width: 4px; height: 4px;
}
input[type=radio] {
vertical-align: baseline; -webkit-appearance: radio !important; margin-right: 5px; position: absolute; clip: rect(0, 0, 0, 0);
}
最终效果图就是这样: