主要是通过label的样式来覆盖radio本身的样式
1.先取消radio本身的样式
2.设置关联的label属性
input[name='options']{
display: none;
}
input[name='options']+label{
background: transparent;
display: inline-block;
width:86px;
height: 32px;
position: relative;
font-size: 12px;
line-height: 32px;
text-align: center;
border: 1px solid #f4f4f4;
}
input[name='options']:checked +label{
background: url(img/bg.png) no-repeat;
border: 1px solid #fff;
}
下面是HTML文件
<input type="radio" name="options" id="radio-1" class="" value="0" />
<label for="radio-1">收入</label>
<input type="radio" name="options" id="radio-2" class="" value="1"/>
<label for="radio-2">支出</label>
<input type="radio" name="options" id="radio-3" class="" value="2" checked="checked"/>
<label for="radio-3">全部</label>
去除原有的样式有代码中使用了CSS3中的appearance 属性,我这里直接隐藏掉了,点击事件效果不影响。
- 所有主流浏览器都不支持 appearance 属性。
- Firefox 支持替代的 -moz-appearance 属性。
- Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
下面是效果图