input標(biāo)簽type=radio樣式調(diào)整起來有點(diǎn)變態(tài)不傅，所以我們通常會(huì)選擇用label標(biāo)簽綁定radio，然后調(diào)整label標(biāo)簽的樣式料扰，達(dá)到自定義樣式的目的代承。
這里寫了一個(gè)小例子：
<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>已經(jīng)在籌款</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);
}
最終效果圖就是這樣：
