radio标签自定义样式问题

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

}

最终效果图就是这样:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容