radio标签自定义样式问题

input标签type=radio样式调整起来有点变态，所以我们通常会选择用label标签绑定radio，然后调整label标签的样式，达到自定义样式的目的。

这里写了一个小例子：

    

    尚未筹款

    

    已经在筹款

 

这里书写样式：

.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);

}

最终效果图就是这样：