自定义radio样式
html结构:
<span class="form-checkbox-label">是否缴纳社保: </span>
<span>
<input type="radio" class="input_check" id="check1" name="sex" />
<label for="check1"></label>
</span>
<label for="check1">是</label>
<span>
<input type="radio" class="input_check" id="check2" name="sex" />
<label for="check2"></label>
</span>
<label for="check2">否</label>
css样式:
/* radio自定义样式 */
#check span {
position: relative;
}
#check .input_check {
position: absolute;
width: 14px;
height: 14px;
visibility: hidden;
}
#check .input_check+label {
vertical-align: middle;
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #bfbfbf;
border-radius: 50%;
padding: 3px;
background-clip: content-box;
}
#check .input_check:checked+label {
background-clip: content-box;
}
#check1, #check2{
vertical-align: middle;
}
结果: