先看效果
<div class="reg_radio">
<label for="male">
<input name="sex" id="male" class="m_radio reg_r_box " type="radio" value="M">
<span class="sex_radio"></span>
<span class="radio_f_lab">男性</span>
</label>
<label for="female">
<input name="sex" id="female" class="m_radio reg_r_box " type="radio" value="F">
<span class="sex_radio"></span>
<span class="radio_f_lab">女性</span>
</label>
</div>
CSS 部分代码
.m_radio{
display: none!important;
}
.sex_radio{
/* margin-left: 24px; */
margin-right: 8px;
box-sizing: border-box;
display: inline-block;
border:2px solid #4886E5 ;
width:32px;
height: 32px;
border-radius:50%;
vertical-align: middle;
position: relative;
}
.radio_f_lab{
font-size: 13px;
height: 44px;
line-height: 44px;
font-family: "costfontR";
color: #fff;
}
.sex_radio:before{
.sex_radio:before{
content: '';
font-size: 0;
width: 30px;
height: 30px;
background: #ffffff;
position: absolute;
left: 0;
top: 0;
margin-left: -1px;
margin-top: -1px;
border-radius: 50%;
display: none;
border: 8px solid #4886E5;
}
.m_radio:checked~.sex_radio:before{
display: block;
}