【HTML+CSS】教你切图篇3-自定义单选、多选、下拉框的实现

大家都知道，默认的单选、多选、下拉控件样式实在是丑哭了。下面小编介绍两种实现单选、多选、下拉控件的样式。首先来介绍第一种：

1.用CSS+HTML实现

这种实现方式是简单，获取数据方便，兼容主流浏览器，缺点就是IE8以及以下的浏览器都不兼容，所以要兼容到更低版本的IE浏览器就需要用到第二种方法了。

首先先看效果图：

代码如下：

	
	
	


	

		复选框
		
		
		
		
		
		
		
	
	

		单选框
		
		
		
		
		
		
		
	

其实关键是.checkbox01:checked+label这个选择器，实现的原理是首先设置标签的背景，隐藏标签，当标签被点击时，改变标签的背景。后天获取数据时仍然是获取的数据，非常方便。要注意一点是的for属性一定对应标签的id哦。

2.JQuery实现

首先看效果图：

这种主要是用一个大神的插件实现的，插件基于JQuery框架编写，所以在引入插件js文件时首先要引入JQuery文件，两个文件链接，JQuery：http://pan.baidu.com/s/1jGValUm 插件：http://pan.baidu.com/s/1qWV3JjA怎么使用在注释里写得很清楚。这种方法的好处是兼容各种主流浏览器，包括IE7、8，不便的地方是获取数据时需要根据节点获取数据，下面贴出我的html代码：

	
	
	


	

		
		

			
苹果
			
香蕉
			
梨
			
西瓜
			
菠萝
			
芒果
		
		
		
		

			
全选
			
A
			
B
			
C
		
		

			
全选
			
A
			
B
			
C
		
		
		
		

			

			

				苏州
				无锡
				常州
				杭州
			
		
		
	
 

事始：只要你还在尝试，就不算失败。