jQuery自定义下拉框选择列表 5款炫酷样式 | HTML5资源教程

这是一款基于jQuery的自定义下拉框选择列表插件，利用这款jQuery插件我们可以非常方便的让浏览器默认的select下拉框变的非常华丽，并且同时拥有select下拉框原有的功能。这款jQuery下拉框插件利用了CSS3技术，提供了5款不同的炫酷样式。

在线演示1在线演示2在线演示3在线演示4在线演示5源码下载

我们对其中一个的实现代码进行简单讲解，代码主要由HTML、CSS和jQuery组成。

HTML代码：

Sign in with

• Twitter
• Github
• Facebook

CSS代码：

.wrapper-dropdown-2 { /* Size and position */ position: relative; /* Enable absolute positionning for children and pseudo elements */ width: 200px; margin: 0 auto; padding: 10px 15px; /* Styles */ background: #fff; border-left: 5px solid grey; cursor: pointer; outline: none;}.wrapper-dropdown-2:after { content: ''; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: grey transparent;}.wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 100%; left: -5px; right: 0px; /* Styles */ background: white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none;}.wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #333; border-left: 5px solid; padding: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}.wrapper-dropdown-2 .dropdown li:nth-child(1) a { border-left-color: #00ACED;}.wrapper-dropdown-2 .dropdown li:nth-child(2) a { border-left-color: #4183C4;}.wrapper-dropdown-2 .dropdown li:nth-child(3) a { border-left-color: #3B5998;}.wrapper-dropdown-2 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle;}/* Hover state */.wrapper-dropdown-2 .dropdown li:hover a { color: grey;}/* Active state */.wrapper-dropdown-2.active:after { border-width: 0 6px 6px 6px;}.wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto;}

jQuery代码：

function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-2').removeClass('active'); }); });

在线演示1在线演示2在线演示3在线演示4在线演示5源码下载