css - 表单元素默认样式美化 - 单选框

单选框

HTML代码

<div class="radio">
    <input type="radio" id="radio1" name="delicacy_is_recommend" checked="checked" value="0">
    <label for="radio1">1</label>
    <input type="radio" id="radio2" name="delicacy_is_recommend" value="1">
    <label for="radio2">2</label>
</div>

样式：

.radio input{
visibility: hidden;
}
.radio label{
position: relative;
}
.radio label:after{
content: "";/*必须设置*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #5dbd5d;
position: absolute;
top: 0px;
left: -32px;
border-radius: 20px;
}

.radio input:checked+label:after{
background-color: #5dbd5d;
}

 

效果：

或者使用背景图片