自定义radio样式

主要是通过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 属性，我这里直接隐藏掉了，点击事件效果不影响。

1. 所有主流浏览器都不支持 appearance 属性。
2. Firefox 支持替代的 -moz-appearance 属性。
3. Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

下面是效果图