Pure CSS3 Select
- 作者: 灵囧境
- 来源: 51数据库
- 2022-09-22
<!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: 1**x;
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: **x;
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: **x;
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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 **x 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 >
<nav id="top_nav">
<ul >
<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 >
<header id="header">
<hgrounp >
<h1>Pure CSS3 Select </h1>
<h2>作者：藤藤(如有更好建议或疑问请加群：1041263)<h2>
</hgrounp>
</header>
<section >
<div >
<form>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
<div >
<label>
<select>
<option>Click it please</option>
</select>
</label>
</div>
</form>
</div><!-- /control -->
</section>
<section id="ad_w3cplus">
<div >
<script type="text/javascript">
/*250*250，创建于2012-10-14-3*/
var cpro_id = "u1089145";
</script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/330/330426_20220922165005620.js" type="text/javascript"></script>
</div>
<div >
<script type="text/javascript">
/*250*250，创建于2012-10-14-2*/
var cpro_id = "u1089141";
</script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/330/330426_20220922165005620.js" type="text/javascript"></script>
</div>
<div >
<script type="text/javascript">
/*250*250，创建于2012-10-11*/
var cpro_id = "u1086065";
</script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/330/330426_20220922165005620.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>
推荐阅读
