CSS3不一样的下拉选择框

<div class="content">　　<div class="select">　　　　<p att="select p">所有选项</p>　　　　<ul att="select ul">　　　　　　<li data-value="所有选项" class="selected">所有选项</li>　　　　　　<li data-value="html">html</li>　　　　　　<li data-value="css">css</li>　　　　　　<li data-value="javascript">javascript</li>　　　　　　<li data-value="jQuery">jQuery</li>　　　　</ul>　　</div></div>

<style type="text/css">　　body{
　　　　padding: 0;　　　　margin: 0;　　　　background-color: #0099cc;　　　　color: #333333;　　}　　.content{　　　　padding-top: 5%;　　}　　.content .select{　　　　width: 300px;　　　　height: 40px;　　　　margin: 0 auto;　　　　font-family: "Microsoft Yahei";　　　　font-size: 16px;　　　　background-color: #ffffff;　　　　position: relative;　　}</style>

[att~=select]{ ???padding: 0; ???margin: 0;}.content .select:after{ ???content: ""; ???display: block; ???width: 10px; ???height: 10px; ???border-left: 1px #cccccc solid; ???border-bottom: 1px #cccccc solid; ???position: absolute; ???top: 11px; ???right: 12px; ???-webkit-transform: rotate(-45deg); ???-moz-transform: rotate(-45deg); ???-ms-transform: rotate(-45deg); ???-o-transform: rotate(-45deg); ???transform: rotate(-45deg); ???-webkit-transition: -webkit-transform .3s ease-in, top .3s ease-in; ???-moz-transition: -moz-transform .3s ease-in, top .3s ease-in; ???-ms-transition: ?-ms-transform .3s ease-in, top .3s ease-in; ???-o-transition: -o-transform .3s ease-in, top .3s ease-in; ???transition: transform .3s ease-in, top .3s ease-in;}.content .select p{ ???padding: 0 15px; ???line-height: 40px; ???/*设置光标样式：手型*/ ???cursor: pointer;}.content .select ul{ ???width: 100%; ???/*这样设置相当于隐藏了ul，便实现了下拉样式*/ ???max-height: 0; ???list-style-type: none; ???background-color: #ffffff; ???overflow-y: auto; ???position: absolute; ???top: 40px; ???left: 0; ???-webkit-transition: max-height .3s ease-in; ???-moz-transition: max-height .3s ease-in; ???-ms-transition: max-height .3s ease-in; ???-o-transition: max-height .3s ease-in; ???transition: max-height .3s ease-in;}.content .select ul li{ ???padding: 0 15px; ???line-height: 40px; ???cursor: pointer;}.content .select ul li:hover{ ???background-color: #e0e0e0;}.content .select ul li.selected{ ???background-color: #3399ff; ???color: #ffffff;}@-webkit-keyframes slide-down { ???0%{ ???????-webkit-transform: scale(1, 0); ???????-moz-transform: scale(1, 0); ???????-ms-transform: scale(1, 0); ???????-o-transform: scale(1, 0); ???????transform: scale(1, 0); ???} ???25%{ ???????-webkit-transform: scale(1, 1.2); ???????-moz-transform: scale(1, 1.2); ???????-ms-transform: scale(1, 1.2); ???????-o-transform: scale(1, 1.2); ???????transform: scale(1, 1.2); ???} ???50%{ ???????-webkit-transform: scale(1, 0.85); ???????-moz-transform: scale(1, 0.85); ???????-ms-transform: scale(1, 0.85); ???????-o-transform: scale(1, 0.85); ???????transform: scale(1, 0.85); ???} ???75%{ ???????-webkit-transform: scale(1, 1.05); ???????-moz-transform: scale(1, 1.05); ???????-ms-transform: scale(1, 1.05); ???????-o-transform: scale(1, 1.05); ???????transform: scale(1, 1.05); ???} ???100%{ ???????-webkit-transform: scale(1, 1); ???????-moz-transform: scale(1, 1); ???????-ms-transform: scale(1, 1); ???????-o-transform: scale(1, 1); ???????transform: scale(1, 1); ???}}@-moz-keyframes slide-down { ???0%{ ???????-webkit-transform: scale(1, 0); ???????-moz-transform: scale(1, 0); ???????-ms-transform: scale(1, 0); ???????-o-transform: scale(1, 0); ???????transform: scale(1, 0); ???} ???25%{ ???????-webkit-transform: scale(1, 1.2); ???????-moz-transform: scale(1, 1.2); ???????-ms-transform: scale(1, 1.2); ???????-o-transform: scale(1, 1.2); ???????transform: scale(1, 1.2); ???} ???50%{ ???????-webkit-transform: scale(1, 0.85); ???????-moz-transform: scale(1, 0.85); ???????-ms-transform: scale(1, 0.85); ???????-o-transform: scale(1, 0.85); ???????transform: scale(1, 0.85); ???} ???75%{ ???????-webkit-transform: scale(1, 1.05); ???????-moz-transform: scale(1, 1.05); ???????-ms-transform: scale(1, 1.05); ???????-o-transform: scale(1, 1.05); ???????transform: scale(1, 1.05); ???} ???100%{ ???????-webkit-transform: scale(1, 1); ???????-moz-transform: scale(1, 1); ???????-ms-transform: scale(1, 1); ???????-o-transform: scale(1, 1); ???????transform: scale(1, 1); ???}}@-o-keyframes slide-down { ???0%{ ???????-webkit-transform: scale(1, 0); ???????-moz-transform: scale(1, 0); ???????-ms-transform: scale(1, 0); ???????-o-transform: scale(1, 0); ???????transform: scale(1, 0); ???} ???25%{ ???????-webkit-transform: scale(1, 1.2); ???????-moz-transform: scale(1, 1.2); ???????-ms-transform: scale(1, 1.2); ???????-o-transform: scale(1, 1.2); ???????transform: scale(1, 1.2); ???} ???50%{ ???????-webkit-transform: scale(1, 0.85); ???????-moz-transform: scale(1, 0.85); ???????-ms-transform: scale(1, 0.85); ???????-o-transform: scale(1, 0.85); ???????transform: scale(1, 0.85); ???} ???75%{ ???????-webkit-transform: scale(1, 1.05); ???????-moz-transform: scale(1, 1.05); ???????-ms-transform: scale(1, 1.05); ???????-o-transform: scale(1, 1.05); ???????transform: scale(1, 1.05); ???} ???100%{ ???????-webkit-transform: scale(1, 1); ???????-moz-transform: scale(1, 1); ???????-ms-transform: scale(1, 1); ???????-o-transform: scale(1, 1); ???????transform: scale(1, 1); ???}}@keyframes slide-down { ???0%{ ???????-webkit-transform: scale(1, 0); ???????-moz-transform: scale(1, 0); ???????-ms-transform: scale(1, 0); ???????-o-transform: scale(1, 0); ???????transform: scale(1, 0); ???} ???25%{ ???????-webkit-transform: scale(1, 1.2); ???????-moz-transform: scale(1, 1.2); ???????-ms-transform: scale(1, 1.2); ???????-o-transform: scale(1, 1.2); ???????transform: scale(1, 1.2); ???} ???50%{ ???????-webkit-transform: scale(1, 0.85); ???????-moz-transform: scale(1, 0.85); ???????-ms-transform: scale(1, 0.85); ???????-o-transform: scale(1, 0.85); ???????transform: scale(1, 0.85); ???} ???75%{ ???????-webkit-transform: scale(1, 1.05); ???????-moz-transform: scale(1, 1.05); ???????-ms-transform: scale(1, 1.05); ???????-o-transform: scale(1, 1.05); ???????transform: scale(1, 1.05); ???} ???100%{ ???????-webkit-transform: scale(1, 1); ???????-moz-transform: scale(1, 1); ???????-ms-transform: scale(1, 1); ???????-o-transform: scale(1, 1); ???????transform: scale(1, 1); ???}}.content .select.open ul{ ???max-height: 250px; ???transform-origin: 50% 0; ???-webkit-animation: slide-down 0.5s ease-in; ???-moz-animation: slide-down 0.5s ease-in; ???-o-animation: slide-down 0.5s ease-in; ???animation: slide-down 0.5s ease-in; ???-webkit-transition: max-height .2s ease-in; ???-moz-transition: max-height .2s ease-in; ???-ms-transition: max-height .2s ease-in; ???-o-transition: max-height .2s ease-in; ???transition: max-height .2s ease-in;}.content .select.open:after{ ???-webkit-transform: rotate(-225deg); ???-moz-transform: rotate(-225deg); ???-ms-transform: rotate(-225deg); ???-o-transform: rotate(-225deg); ???transform: rotate(-225deg); ???top: 18px; ???-webkit-transition: all .3s ease-in; ???-moz-transition: all .3s ease-in; ???-ms-transition: all .3s ease-in; ???-o-transition: all .3s ease-in; ???transition: all .3s ease-in;}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">　　$(function(){　　　　$(‘.select > p‘).on(‘click‘, function (e) {
　　　　　　// 检查class属性是否有open值，有则删除，没有则添加　　　　　　$(‘.select‘).toggleClass(‘open‘);
　　　　　　// 处理冒泡事件　　　　　　e.stopPropagation();　　　　});　　　　$(‘.select ul li‘).on(‘click‘, function (e) {　　　　　　var _this = $(this);　　　　　　$(‘.select > p‘).text(_this.attr(‘data-value‘));　　　　　　_this.addClass(‘selected‘).siblings().removeClass(‘selected‘);　　　　　　$(‘.select‘).removeClass(‘open‘);　　　　　　e.stopPropagation();　　　　});　　　　$(document).on(‘click‘, function () {　　　　　　$(‘.select‘).removeClass(‘open‘);　　　　});　　});</script>