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

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

1.用CSS+HTML实现

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

首先先看效果图：

代码如下：
 

<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
/*复选 S*/
	/*将input隐藏，设置label标签的背景，替换成checkbox，实现自定义标签样式*/
	.checkbox{
		width: 100px;height: 80px;float: left;
	}
	.checkbox01{
		display: none;
		width: 30px;height: 30px;
	}
	.checkbox label{
		display: block;
		width: 80px;height: 40px;
		background: url(images/rb01.png) no-repeat left center;
	}
	/*通过设置checkbox的点击事件实现label的背景图片更换*/
	.checkbox01:checked+label{
		background: url(images/rb02.png) no-repeat left center;
	}
	/*复选 E*/
	/*单选 S*/
	.radio{
		width: 100px;height: 80px;float: left;
	}
	.radio01{
		display: none;
		width: 30px;height: 30px;
	}
	.radio label{
		display: block;
		width: 80px;height: 40px;
		background: url(images/cbox_01.png) no-repeat left center;
	}
	/*通过设置radio的点击事件实现label的背景图片更换*/
	.radio01:checked+label{
		background: url(images/cbox_02.png) no-repeat left center;
	}
	/*单选 E*/</style>
复选框 <input class="checkbox01" id="01" name="c01" type="checkbox" /> <!--for属性表示在label内点击，就会触发radio控件--><input class="checkbox01" id="02" name="c02" type="checkbox" /> <input class="checkbox01" id="03" name="c03" type="checkbox" /> 单选框 <input class="radio01" id="04" name="c01" type="radio" /> <!--for属性表示在label内点击，就会触发radio控件--><input class="radio01" id="05" name="c01" type="radio" /> <input class="radio01" id="06" name="c01" type="radio" />
<p>&nbsp;</p>
<p>其实关键是.checkbox01:checked+label这个选择器，实现的原理是首先设置<label>标签的背景，隐藏<input />标签，当<input />标签被点击时，改变<label>标签的背景。后天获取数据时仍然是获取<input />的数据，非常方便。要注意一点是<label>的for属性一定对应<input />标签的id哦。</label></label></label></p>
<p>2.JQuery实现</p>
<p>首先看效果图：</p>
<p><img alt="" src=/uploadfile/2016/0225/20160225011520365.png" /></p>
<p>这种主要是用一个大神的插件实现的，插件基于JQuery框架编写，所以在引入插件js文件时首先要引入JQuery文件，两个文件链接，JQuery：https://pan.baidu.com/s/1jGValUm 插件：https://pan.baidu.com/s/1qWV3JjA怎么使用在注释里写得很清楚。这种方法的好处是兼容各种主流浏览器，包括IE7、8，不便的地方是获取数据时需要根据节点获取数据，下面贴出我的html代码：</p>
<p>&nbsp;</p>
<pre class="brush:java;">
</pre>
<title></title>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 单选框 S -->
<p class="checked" name="rbt" type="radiobox" val="man">苹果</p>
<p name="rbt" type="radiobox" val="wom">香蕉</p>
<p name="rbt" type="radiobox" val="wom">梨</p>
<p name="rbt" type="radiobox" val="wom">西瓜</p>
<p name="rbt" type="radiobox" val="wom">菠萝</p>
<p name="rbt" type="radiobox" val="wom">芒果</p>
<!-- 单选框 E --><!-- 多选框 S -->全选 C 全选 C <!-- 多选框 E --><!-- 下拉框 S -->
<p name="city" type="selectbox">&nbsp;</p>
<a href="javascript：;" val="050101">苏州</a> <a class="selected" href="javascript：;" val="050101">无锡</a> <a class="selected" href="javascript：;" val="050101">常州</a> <a class="selected" href="javascript：;" val="050101">杭州</a> <!-- 下拉框 E --><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.inputbox.js"></script><script type="text/javascript">
//checkbox
$(function(){
	$(&#39;[name="rbt"]&#39;).inputbox();
	$(&#39;.cbt&#39;).inputbox();//多组选项框均适用
	$(&#39;p[name="city"]&#39;).inputbox();
});

</script>