先看效果:
html结构:
<p>数据是否一致:
<label class="radiobox"><input name="currentRadio" type="radio">是</label>
<label class="radiobox"><input name="currentRadio" type="radio" >否</label>
</p>
css样式:
.radiobox
{
position: relative;
padding-left: 8px;
}
.radiobox:before{
content: '';
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
background: #fff;
position: absolute;
top: -2px;
left: 6px;
}
input[type=radio]:checked:before{
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #999;
position: absolute;
top: 4px;
left: 12px;
}
input[type=radio]{
margin-right: 6px;
}
so easy。后面有空再写写复选框的样式。