自己写了个radio样式,根据项目需求写的。上传到博客,方便以后使用。
先贴css样式,样式不多,比较简单,易懂。
.radio_btn{
width: 30px;
height: 30px;
background: url(../images/dx.png) no-repeat;
background-size: cover;
display: inline-block;
/*background: orange;*/
border-radius:50%;
position: relative;
vertical-align: middle;
}
.radio_btn input{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 100;
}
.radio_btn span{
background: url(../images/dx-.png) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
}
.radio_btn input[type=radio]+span{
opacity: 0;
}
.radio_btn input[type=radio]:checked+span{
opacity: 1;
}
HTML部分:
<div class="radio_btn">
<input type="radio" name="sex" id="man" value="" checked="checked" />
<span></span>
</div>
<div class="radio_btn">
<input type="radio" name="sex" id="male" value="" />
<span></span>
</div>
注意:图片是本地所有,可根据自己的需求来。可以定义成背景颜色来显示。