Pure CSS3 Select

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Pure CSS3 Select|w3cplus</title>
	<meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
	<meta name="description" content="W3CPLUS是一个前端爱好者的家园,W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创,以一起学习,一起进步,共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源,与前端爱好者一起共勉。">
	<link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">
	<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<style>
body {
	background-color:#4a6d8d;
	background-image: -webkit-radial-gradient(rgba(197,241,251,.3), transparent),
							-webkit-linear-gradient(#5c80a2 1px, transparent 1px),
							-webkit-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
							-webkit-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
							-webkit-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
	background-image: -moz-radial-gradient(rgba(197,241,251,.3), transparent),
							-moz-linear-gradient(#5c80a2 1px, transparent 1px),
							-moz-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
							-moz-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
							-moz-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
	background-image: -ms-radial-gradient(rgba(197,241,251,.3), transparent),
							-ms-linear-gradient(#5c80a2 1px, transparent 1px),
							-ms-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
							-ms-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
							-ms-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);
	background-image: -o-radial-gradient(rgba(197,241,251,.3), transparent),
							-o-linear-gradient(#5c80a2 1px, transparent 1px),
							-o-linear-gradient(0deg, #5c80a2 1px, transparent 1px),
							-o-linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
							-o-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);	
	background-image: radial-gradient(rgba(197,241,251,.3), transparent),
							linear-gradient(#5c80a2 1px, transparent 1px),
							linear-gradient(0deg, #5c80a2 1px, transparent 1px),
							linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
							linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px);									
	background-size:100% 100%,100px 100px, 100px 100px, 10px 10px, 10px 10px;
	background-position:0 0,-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.demo {
	width: 600px;
	margin: 80px auto 0;
}
.control_select {
	margin-bottom: 20px;
	width: 200px;
	float: left;
}
select {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
    line-height: 1.8em;
    width: 90%;
    padding: 10px 15px 10px 10px;
    border-radius: 3px;
    height: 44px;
    -webkit-appearance: none;
}
label {
	position: relative;
}

label:after {
	position:absolute;
	top: -4px;
	right: 12px;
	display: inline-block;
	content: "\25ba";
	color: #fff;
	font-size: 16px;
	text-align: center;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	pointer-events: none;
}
.control_select:nth-child(1) label:after {
	box-shadow: 0 1px 2px #263f57 inset,
					0 1px 0 #639cc6;
	background: -webkit-linear-gradient(top,#2f4f6d,#3c5f80);
	background: -moz-linear-gradient(top,#2f4f6d,#3c5f80);
	background: -ms-linear-gradient(top,#2f4f6d,#3c5f80);
	background: -o-linear-gradient(top,#2f4f6d,#3c5f80);
	background: linear-gradient(top,#2f4f6d,#3c5f80);
}
.control_select:nth-child(1) select{
	border: 1px solid #304455;
    box-shadow: 0 1px 0 #a3c1de inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#78a4ce,#3e6386);
    background: -moz-linear-gradient(top,#78a4ce,#3e6386);
    background: -ms-linear-gradient(top,#78a4ce,#3e6386);
    background: -o-linear-gradient(top,#78a4ce,#3e6386);
    background: linear-gradient(top,#78a4ce,#3e6386);
}
.control_select:nth-child(1) select:hover {
    background: -webkit-linear-gradient(top,#8fbfe6,#3d668c);
    background: -moz-linear-gradient(top,#8fbfe6,#3d668c);
    background: -ms-linear-gradient(top,#8fbfe6,#3d668c);
    background: -o-linear-gradient(top,#8fbfe6,#3d668c);
    background: linear-gradient(top,#8fbfe6,#3d668c);
}
.control_select:nth-child(1) select:active {
	box-shadow: 0 2px 5px #324c64 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#416486,#5680a8);
    background: -moz-linear-gradient(top,#416486,#5680a8);
    background: -ms-linear-gradient(top,#416486,#5680a8);
    background: -o-linear-gradient(top,#416486,#5680a8);
    background: linear-gradient(top,#416486,#5680a8);
}
.control_select:nth-child(2) label:after {
	box-shadow: 0 1px 2px #572626 inset,
					0 1px 0 #d177a5;
	background: -webkit-linear-gradient(top,#6d2f2f,#803c5d);
	background: -moz-linear-gradient(top,#6d2f2f,#803c5d);
	background: -ms-linear-gradient(top,#6d2f2f,#803c5d);
	background: -o-linear-gradient(top,#6d2f2f,#803c5d);
	background: linear-gradient(top,#6d2f2f,#803c5d);
}
.control_select:nth-child(2) select{
	border: 1px solid #502b3a;
    box-shadow: 0 1px 0 #e1a6bc inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d17c9d,#89425d);
    background: -moz-linear-gradient(top,#d17c9d,#89425d);
    background: -ms-linear-gradient(top,#d17c9d,#89425d);
    background: -o-linear-gradient(top,#d17c9d,#89425d);
    background: linear-gradient(top,#d17c9d,#89425d);
}
.control_select:nth-child(2) select:hover {
    background: -webkit-linear-gradient(top,#e08db0,#924360);
    background: -moz-linear-gradient(top,#e08db0,#924360);
    background: -ms-linear-gradient(top,#e08db0,#924360);
    background: -o-linear-gradient(top,#e08db0,#924360);
    background: linear-gradient(top,#e08db0,#924360);
}
.control_select:nth-child(2) select:active {
	box-shadow: 0 2px 5px #522b3b inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7b3b53,#a04e6d);
    background: -moz-linear-gradient(top,#7b3b53,#a04e6d);
    background: -ms-linear-gradient(top,#7b3b53,#a04e6d);
    background: -o-linear-gradient(top,#7b3b53,#a04e6d);
    background: linear-gradient(top,#7b3b53,#a04e6d);
}
.control_select:nth-child(3) label:after {
	box-shadow: 0 1px 2px #215325 inset,
					0 1px 0 #6ec98d;
	background: -webkit-linear-gradient(top,#2a682f,#3c805f);
	background: -moz-linear-gradient(top,#2a682f,#3c805f);
	background: -ms-linear-gradient(top,#2a682f,#3c805f);
	background: -o-linear-gradient(top,#2a682f,#3c805f);
	background: linear-gradient(top,#2a682f,#3c805f);
}
.control_select:nth-child(3) select{
	border: 1px solid #2d5237;
    box-shadow: 0 1px 0 #a5e0b6 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7dd295,#3d8451);
    background: -moz-linear-gradient(top,#7dd295,#3d8451);
    background: -ms-linear-gradient(top,#7dd295,#3d8451);
    background: -o-linear-gradient(top,#7dd295,#3d8451);
    background: linear-gradient(top,#7dd295,#3d8451);
}
.control_select:nth-child(3) select:hover {
    background: -webkit-linear-gradient(top,#96e8aa,#3d8f55);
    background: -moz-linear-gradient(top,#96e8aa,#3d8f55);
    background: -ms-linear-gradient(top,#96e8aa,#3d8f55);
    background: -o-linear-gradient(top,#96e8aa,#3d8f55);
    background: linear-gradient(top,#96e8aa,#3d8f55);
}
.control_select:nth-child(3) select:active {
	box-shadow: 0 2px 5px #335a3d inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#3b7b4d,#56a96e);
    background: -moz-linear-gradient(top,#3b7b4d,#56a96e);
    background: -ms-linear-gradient(top,#3b7b4d,#56a96e);
    background: -o-linear-gradient(top,#3b7b4d,#56a96e);
    background: linear-gradient(top,#3b7b4d,#56a96e);
}
.control_select:nth-child(4) label:after {
	box-shadow: 0 1px 2px #461b74 inset,
					0 1px 0 #ac77e2;
	background: -webkit-linear-gradient(top,#522185,#612c99);
	background: -moz-linear-gradient(top,#522185,#612c99);
	background: -ms-linear-gradient(top,#522185,#612c99);
	background: -o-linear-gradient(top,#522185,#612c99);
	background: linear-gradient(top,#522185,#612c99);
}
.control_select:nth-child(4) select{
	border: 1px solid #703b88;
    box-shadow: 0 1px 0 #b474e6 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#a25de3,#7632bd);
    background: -moz-linear-gradient(top,#a25de3,#7632bd);
    background: -ms-linear-gradient(top,#a25de3,#7632bd);
    background: -o-linear-gradient(top,#a25de3,#7632bd);
    background: linear-gradient(top,#a25de3,#7632bd);
}
.control_select:nth-child(4) select:hover {
    background: -webkit-linear-gradient(top,#b678f2,#7b38c0);
    background: -moz-linear-gradient(top,#b678f2,#7b38c0);
    background: -ms-linear-gradient(top,#b678f2,#7b38c0);
    background: -o-linear-gradient(top,#b678f2,#7b38c0);
    background: linear-gradient(top,#b678f2,#7b38c0);
}
.control_select:nth-child(4) select:active {
	box-shadow: 0 2px 5px #461b74 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#7332b7,#7c3ac1);
    background: -moz-linear-gradient(top,#7332b7,#7c3ac1);
    background: -ms-linear-gradient(top,#7332b7,#7c3ac1);
    background: -o-linear-gradient(top,#7332b7,#7c3ac1);
    background: linear-gradient(top,#7332b7,#7c3ac1);
}
.control_select:nth-child(5) label:after {
	box-shadow: 0 1px 2px #777b12 inset,
					0 1px 0 #e7ea94;
	background: -webkit-linear-gradient(top,#7b7f17,#a6ab2e);
	background: -moz-linear-gradient(top,#7b7f17,#a6ab2e);
	background: -ms-linear-gradient(top,#7b7f17,#a6ab2e);
	background: -o-linear-gradient(top,#7b7f17,#a6ab2e);
	background: linear-gradient(top,#7b7f17,#a6ab2e);
}
.control_select:nth-child(5) select{
	border: 1px solid #4f5004;
    box-shadow: 0 1px 0 #e7ea94 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d1d744,#959a24);
    background: -moz-linear-gradient(top,#d1d744,#959a24);
    background: -ms-linear-gradient(top,#d1d744,#959a24);
    background: -o-linear-gradient(top,#d1d744,#959a24);
    background: linear-gradient(top,#d1d744,#959a24);
}
.control_select:nth-child(5) select:hover {
    background: -webkit-linear-gradient(top,#e5eb65,#aeb333);
    background: -moz-linear-gradient(top,#e5eb65,#aeb333);
    background: -ms-linear-gradient(top,#e5eb65,#aeb333);
    background: -o-linear-gradient(top,#e5eb65,#aeb333);
    background: linear-gradient(top,#e5eb65,#aeb333);
}
.control_select:nth-child(5) select:active {
	box-shadow: 0 2px 5px #4f5004 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#a3a82a,#aeb333);
    background: -moz-linear-gradient(top,#a3a82a,#aeb333);
    background: -ms-linear-gradient(top,#a3a82a,#aeb333);
    background: -o-linear-gradient(top,#a3a82a,#aeb333);
    background: linear-gradient(top,#a3a82a,#aeb333);
}
.control_select:nth-child(6) label:after {
	box-shadow: 0 1px 2px #741c1c inset,
					0 1px 0 #e15656;
	background: -webkit-linear-gradient(top,#992d2d,#ac3d3d);
	background: -moz-linear-gradient(top,#992d2d,#ac3d3d);
	background: -ms-linear-gradient(top,#992d2d,#ac3d3d);
	background: -o-linear-gradient(top,#992d2d,#ac3d3d);
	background: linear-gradient(top,#992d2d,#ac3d3d);
}
.control_select:nth-child(6) select{
	border: 1px solid #652525;
    box-shadow: 0 1px 0 #f8aaaa inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#d55151,#b03030);
    background: -moz-linear-gradient(top,#d55151,#b03030);
    background: -ms-linear-gradient(top,#d55151,#b03030);
    background: -o-linear-gradient(top,#d55151,#b03030);
    background: linear-gradient(top,#d55151,#b03030);
}
.control_select:nth-child(6) select:hover {
    background: -webkit-linear-gradient(top,#dd5959,#b53333);
    background: -moz-linear-gradient(top,#dd5959,#b53333);
    background: -ms-linear-gradient(top,#dd5959,#b53333);
    background: -o-linear-gradient(top,#dd5959,#b53333);
    background: linear-gradient(top,#dd5959,#b53333);
}
.control_select:nth-child(6) select:active {
	box-shadow: 0 2px 5px #5d1919 inset,
    				0 3px 8px rgba(0,0,0,.4);
    background: -webkit-linear-gradient(top,#9e2525,#b53333);
    background: -moz-linear-gradient(top,#9e2525,#b53333);
    background: -ms-linear-gradient(top,#9e2525,#b53333);
    background: -o-linear-gradient(top,#9e2525,#b53333);
    background: linear-gradient(top,#9e2525,#b53333);
}
 

	</style>
</head>
<body>
<div class="wrap_top_nav">
	<nav id="top_nav">
		<ul class="inline-style clearfix">
			<li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li>
			<li><a href="http://www.w3cplus.com/resources/css3-tutorial-and-case" target="_blank">css3详解教程</a></li>
			<li><a href="http://www.w3cplus.com/demos/list.html" target="_blank">css3实例</a></li>
			<li><a href="http://www.w3cplus.com/demo/tags/242.html" target="_blank">藤藤每日一练</a></li>
		</ul>
		<a id="read" href="http://www.w3cplus.com/demo/pure-css3-select.html" target="_blank">查看原文>></a>
	</nav>
</div>
<div class="page">
	<header id="header">
		<hgrounp class="white">
			<h1>Pure CSS3 Select </h1>
			<h2>作者:藤藤(如有更好建议或疑问请加群:1041263)<h2>
		</hgrounp>
	</header>
	<section class="demo">

<div class="control clearfix">
	<form>
		
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
		<div class="control_select">
			<label>
				<select>
					<option>Click it please</option>
				</select>
			</label>
		</div>
	</form>
</div><!-- /control -->

	</section>
	<section id="ad_w3cplus">
		<div class="grid-ad">
		<script type="text/javascript">
/*250*250,创建于2012-10-14-3*/
var cpro_id = "u1089145";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
		</div>
		<div class="grid-ad">
		<script type="text/javascript">
/*250*250,创建于2012-10-14-2*/
var cpro_id = "u1089141";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
		</div>
		<div class="grid-ad">
		<script type="text/javascript">
/*250*250,创建于2012-10-11*/
var cpro_id = "u1086065";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
		</div>
		<p><script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F177319b798978621f83845b12c86fa29' type='text/javascript'%3E%3C/script%3E"));
</script>
</p>
	</section>
</div>
</body>
</html>