单选框美化:
结构层
<div class="box">
<input type="radio" name="sex" id="mTpl" />
<label class="label" for="mTpl" val="男"></label>
<input type="radio" name="sex" id="fTpl" />
<label class="label" for="fTpl" val="女"></label>
</div>
样式
.box{width:200px;overflow:hidden;margin:30px auto;}
input[type='radio']{display:none;}
.label{position:relative;display:block;width:40px;height:40px;border:1px solid #ccc;border-radius:20px;margin:0px auto 10px;font-size:30px;}
.label::after{content:attr(val);position:absolute;top:4px;right:-40px;color:black;}
input[type='radio']:checked + .label{background-color:#1C86EE;border:none;}
input[type='radio']:checked + .label{background-color:#1C86EE;border:none;}
效果图
![截图](https://img-blog.csdnimg.cn/842eb8c2e53a4edf9dd5b411be28eb09.png)