EasyDropDown是一个美化Select 元素为可定制风格的下拉菜单的插件-BFW插件库

EasyDropDown是一个美化Select 元素为可定制风格的下拉菜单的插件

EasyDropDown 是一个 jQuery 插件,美化Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

自定义风格

可以创建自己的样式，以符合您的设计和品牌，或者使用现成的主题之一。我们建议开始使用默认主题和定制。每个下拉功能都有以下基本标记结构：

<div class="dropdown">
<span class="old">
<select>...</select>
</span>
<span class="selected">Option 1</span>
<span class="carat"></span>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div>

下面这些 class 会被自动添加或者移除：
.focus (container) 输入焦点样式
.open (container) 菜单打开样式
.scrollable (container) 滚动模式样式
.bottom (container) 滚动到底部样式
.touch (container) 原生设备样式
.focus (menu item) 悬浮或者键盘焦点样式
.active (menu item) 选中的菜单项样式

高级用法

上面这样就可以使用了，当然你可以自己定制选项：

$(function(){
var $selects = $('select');

$selects.easyDropDown({
cutOff: 10,
wrapperClass: 'my-dropdown-class',
onSelect: function(selected){
// do something
}
});
});

你也可以把配置以 JSON 数据的格式写在 data-settings 属性中：

<select class="dropdown"
data-settings='{"cutOff":6}'>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
..
</select>

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.easydropdown", "easydropdown"], function() {});
        });
    </script>
    <style>
        /* --- RESET --- */

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }

        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }

        a {
            text-decoration: none;
        }

        nav li {
            list-style-type: none;
            display: inline-block;
        }

        /* --- DEMO STYLES --- */

        body {
            font-family: 'Helvetica Neue', arial, sans-serif;
            color: #333;

            -webkit-font-smoothing: antialiased;
        }

        header {
            padding: 15px 0 20px;
            border-bottom: 1px solid #ddd;
        }

        h1,h2,h3 {
            font-weight: 700;
        }

        .just {
            text-align: justify;
        }

        .just:after {
            content: '';
            width: 100%;
            display: inline-block;
        }

        .just > * {
            display: inline-block;
            vertical-align: bottom;
        }

        .ib {
            display: inline-block;
        }

        header .wrapper {
            padding: 0 30px;
        }

        header h1 {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        header h2 {
            font-weight: 400;
            font-size: 20px;
        }


        section {
            position: relative;
            font-size: 0.1px;
            text-align: justify;
        }

        section:after {
            content: '';
            display: inline-block;
            width: 100%;
        }

        section .wrapper {
            padding: 30px;
        }

        section h3 {
            font-size: 20px;
            margin-bottom: 1em;
            padding-top: .5em;
        }

        section h4 {
            font-size: 18px;
            margin-bottom: 1em;
            font-weight: 300;
        }

        .col {
            display: inline-block;
            vertical-align: top;
            text-align: left;
        }

        .col_1 {
            width: 55%;
        }

        .col_2 {
            width: 45%;
            max-width: 520px;
            background: #333;
            color: #ddd;

            box-shadow: inset 20px 0 20px -20px rgba(0,0,0,.6);
        }

        .col_2 h3,
        .col_2 strong {
            color: #fff;
        }

        p,
        .text li {
            font-size: 16px;
            font-weight: 300;
        }

        p.legal {
            font-size: 14px;
            margin-bottom: 0;
        }

        .col_2 p,
        .col_2 .text li {
            font-weight: 400;
        }

        .btn {
            display: inline-block;
            background: #d24a67;
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            padding: 10px 12px;
            margin-bottom: 30px;

            border-radius: 5px;

            -webkit-transition: all 150ms ease-in-out;
            -moz-transition: all 150ms ease-in-out;
            -ms-transition: all 150ms ease-in-out;
            transition: all 150ms ease-in-out;
        }

        .btn.ib {
            margin-right: 10px;
        }

        .btn:hover,
        .btn:focus {
            background: #fc6767;
            color: #fff;
            outline: 0 none;

            box-shadow: inset 0 0 10px rgba(0,0,0,.2);
        }

        p {
            line-height: 1.4;
            margin-bottom: 25px;
        }

        p code,
        li code {
            font-size: 15px;
            background: rgba(255,255,255,.7);
            color: #333;
            padding: 2px;

            border-radius: 1px;
        }

        a {
            color: #d24a67;
        }

        a:hover {
            color: #fc6767;
        }

        pre {
            font-size: 15px;
            color: #c4ae78;
            margin: 15px 0 30px;

            -webkit-font-smoothing: auto;
        }

        ul.text {
            margin: 0 0 30px 18px;
            list-style: square;
        }

        .text li {
            line-height: 1.4;
            margin-bottom: 12px;
        }

        select,
        .dropdown {
            margin-bottom: 30px;
            display: inline-block;
        }

        .dropdown {
            margin-right: 8px;
        }

        pre.prettyprint {
            background: #141414;
            color: #f8f8f8;
        }
        pre.prettyprint span.str,pre.prettyprint span.atv {
            color: #8f9d6a;
        }
        pre.prettyprint span.kwd,pre.prettyprint span.pun {
            color: #cda869;
        }
        pre.prettyprint span.com {
            color: #5f5a60;
            font-style: italic;
        }
        pre.prettyprint span.typ {
            color: #9b703f;
        }
        pre.prettyprint span.lit {
            color: #cf6a4c;
        }
        pre.prettyprint span.pln {
            color: #7587a6;
        }
        pre.prettyprint span.tag {
            color: #ac885b;
        }
        pre.prettyprint span.atn {
            color: #e0c589;
        }
        pre.prettyprint span.dec {
            color: #494949;
        }
        pre.prettyprint {
            border: 0 none !important;
            background: transparent !important;
        }

@media all and (max-width: 1040px) {
            .col,
            .col_2,
            .col_1 {
                display: block;
                width: auto;
                max-width: 100%;
                background: #fff;
                color: #333;
                box-shadow: none;
            }

            .col_2 h3,
            .col_2 strong {
                color: #333;
            }

            pre.prettyprint {
                font-size: 14px;
                background: #333 !important;
                padding: 12px !important;
                border-radius: 5px !important;
                overflow-x: scroll;
            }

            hgroup {
                text-align: left;
                margin-bottom: 10px;
            }
        }

        /* --- DEMO METRO THEME --- */

        /* PREFIXED CSS */

        .metro,
        .metro div,
        .metro li,
        .metro div::after,
        .metro .carat,
        .metro .carat:after,
        .metro .selected::after,
        .metro:after {
            -webkit-transition: all 150ms ease-in-out;
            -moz-transition: all 150ms ease-in-out;
            -ms-transition: all 150ms ease-in-out;
            transition: all 150ms ease-in-out;
        }

        .metro .selected::after,
        .metro.scrollable div::after {
            -webkit-pointer-events: none;
            -moz-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
        }

        /* WRAPPER */

        .metro {
            position: relative;
            width: 250px;
            cursor: pointer;
            margin-bottom: 30px;
            font-weight: 200;
            background: #f8f8f8;

            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .metro.open {
            z-index: 2;
        }

        .metro:hover {
            background: #f4f4f4;
        }

        .metro:after {
            content: '';
            position: absolute;
            right: 3px;
            bottom: 3px;
            top: 2px;
            width: 30px;
            background: transparent;
        }

        .metro.focus:after {
            background: #0180d1;
        }

        /* CARAT */

        .metro .carat,
        .metro .carat:after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -4px;
            border: 8px solid transparent;
            border-top: 8px solid #000;
            z-index: 2;

            -webkit-transform-origin: 50% 20%;
            -moz-transform-origin: 50% 20%;
            -ms-transform-origin: 50% 20%;
            transform-origin: 50% 20%;

        }

        .metro .carat:after {
            margin-top: -10px;
            right: -8px;
            border-top-color: #f8f8f8;
        }

        .metro:hover .carat:after {
            border-top-color: #f4f4f4;
        }

        .metro.focus .carat {
            border-top-color: #f8f8f8;
        }

        .metro.focus .carat:after {
            border-top-color: #0180d1;
        }

        .metro.open .carat {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        /* OLD SELECT (HIDDEN) */

        .metro .old {
            position: absolute;
            left: 0;
            top: 0;
            height: 0;
            width: 0;
            overflow: hidden;
        }

        .metro select {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .metro.touch select {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        /* SELECTED FEEDBACK ITEM */

        .metro .selected,
        .metro li {
            display: block;
            font-size: 18px;
            line-height: 1;
            color: #000;
            padding: 9px 12px;
            overflow: hidden;
            white-space: nowrap;
        }

        .metro .selected::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60px;

            border-radius: 0 2px 2px 0;
            box-shadow: inset -55px 0 25px -20px #f8f8f8;
        }

        .metro:hover .selected::after {
            box-shadow: inset -55px 0 25px -20px #f4f4f4;
        }

        /* DROP DOWN WRAPPER */

        .metro div {
            position: absolute;
            height: 0;
            left: 0;
            right: 0;
            top: 100%;
            margin-top: -1px;
            background: #f8f8f8;
            overflow: hidden;
            opacity: 0;
        }

        .metro:hover div {
            background: #f4f4f4;
        }

        /* Height is adjusted by JS on open */

        .metro.open div {
            opacity: 1;
            z-index: 2;
        }

        /* FADE OVERLAY FOR SCROLLING LISTS */

        .metro.scrollable div::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;

            box-shadow: inset 0 -50px 30px -35px #f8f8f8;
        }

        .metro.scrollable:hover div::after {
            box-shadow: inset 0 -50px 30px -35px #f4f4f4;
        }

        .metro.scrollable.bottom div::after {
            opacity: 0;
        }

        /* DROP DOWN LIST */

        .metro ul {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            list-style: none;
            overflow: hidden;
        }

        .metro.scrollable.open ul {
            overflow-y: auto;
        }

        /* DROP DOWN LIST ITEMS */

        .metro li {
            list-style: none;
            padding: 8px 12px;
        }

        /* .focus class is also added on hover */

        .metro li.focus {
            background: #0180d1;
            position: relative;
            z-index: 3;
            color: #fff;
        }

        .metro li.active {
            background: #0180d1;
            color: #fff;
        }

        /* --- DEMO FLAT THEME --- */

        /* PREFIXED CSS */

        .flat,
        .flat div,
        .flat li,
        .flat div::after,
        .flat .carat,
        .flat .carat:after,
        .flat .selected::after,
        .flat:after {
            -webkit-transition: all 150ms ease-in-out;
            -moz-transition: all 150ms ease-in-out;
            -ms-transition: all 150ms ease-in-out;
            transition: all 150ms ease-in-out;
        }

        .flat .selected::after,
        .flat.scrollable div::after {
            -webkit-pointer-events: none;
            -moz-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
        }

        /* WRAPPER */

        .flat {
            position: relative;
            width: 250px;
            cursor: pointer;
            font-weight: 200;
            background: #29AF84;
            padding: 8px 0px 8px;

            border-radius: 5px;

            color: #000;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .flat.open {
            z-index: 2;
        }

        .flat:hover,
        .flat.focus {
            background: #00C384;
        }

        /* CARAT */

        .flat .carat,
        .flat .carat:after {
            position: absolute;
            right: 14px;
            top: 50%;
            margin-top: -3px;
            border: 6px solid transparent;
            border-top: 6px solid #FFF;
            z-index: 1;

            -webkit-transform-origin: 50% 20%;
            -moz-transform-origin: 50% 20%;
            -ms-transform-origin: 50% 20%;
            transform-origin: 50% 20%;

        }

        .flat:hover .carat:after {
            border-top-color: #f4f4f4;
        }

        .flat.focus .carat {
            border-top-color: #f8f8f8;
        }

        .flat.focus .carat:after {
            border-top-color: #0180d1;
        }

        .flat.open .carat {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        /* OLD SELECT (HIDDEN) */

        .flat .old {
            position: absolute;
            left: 0;
            top: 0;
            height: 0;
            width: 0;
            overflow: hidden;
        }

        .flat select {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .flat.touch select {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        /* SELECTED FEEDBACK ITEM */
        .flat .selected {
            color: #FFF;
        }

        .flat .selected,
        .flat li {
            display: block;
            font-size: 16px;
            font-weight: 400;
            text-transform: uppercase;
            line-height: 1;
            padding: 8px 12px;
            overflow: hidden;
            white-space: nowrap;
        }

        .flat .selected::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60px;

            border-radius: 0 5px 5px 0;
            box-shadow: inset -55px 0 25px -20px #29af84;
        }

        .flat:hover .selected::after,
        .flat.focus .selected::after {
            box-shadow: inset -55px 0 25px -20px #00c384;
        }

        /* DROP DOWN WRAPPER */

        .flat div {
            position: absolute;
            height: 0;
            left: 0;
            right: 0;
            top: 100%;
            margin-top: 1px;
            background: #00C384;
            overflow: hidden;
            opacity: 0;
            color: #04724E;

            border-radius: 5px;
        }

        .flat:hover div {
            background: #00C384;

            border-radius: 5px;
        }

        /* Height is adjusted by JS on open */

        .flat.open div {
            opacity: 1;
            z-index: 2;
        }

        /* FADE OVERLAY FOR SCROLLING LISTS */

        .flat.scrollable div::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;

            box-shadow: inset 0 -50px 30px -35px #00c384;
        }

        .flat.scrollable:hover div::after {
            box-shadow: inset 0 -50px 30px -35px #00c384;
        }

        .flat.scrollable.bottom div::after {
            opacity: 0;
        }

        /* DROP DOWN LIST */

        .flat ul {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            list-style: none;
            overflow: hidden;
            border-radius: 5px;
        }

        .flat.scrollable.open ul {
            overflow-y: auto;
        }

        /* DROP DOWN LIST ITEMS */

        .flat li {
            list-style: none;
            padding: 14px 12px;
            border-bottom: 1px solid #29AF84;
        }

        .flat li:last-child {
            border-bottom: 0;
        }

        /* .focus class is also added on hover */

        .flat li.focus {
            background: #00C384;
            position: relative;
            z-index: 3;
            color: #fff;
        }

        .flat li.active {
            background: #29AF84;
            color: #fff;
        }
    </style>
</head>
<body>
    <header>
        <div class="wrapper just">
            <hgroup>
                <h1>jQuery EasyDropDown</h1>
                <h2>A Drop-down Builder for <strong>Styleable</strong> Inputs and Menus</h2>
            </hgroup>

        </div>
    </header>
    <section>
        <div class="col col_1">
            <div class="wrapper">
                <h3>What Is It?</h3>
                <p>
                    EasyDropDown is a jQuery plugin that effortlessly turns humble <code><select></code> elements …
                </p>

                <fieldset>

                    <select tabindex="1">
                        <option value="" class="label">Month</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>

                    <select tabindex="2">
                        <option value="" class="label">Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>

                    <select tabindex="3">
                        <option value="" class="label">Year</option>
                        <option value="2013">2013</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2008">2008</option>
                        <option value="2007">2007</option>
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                        <option value="2002">2002</option>
                        <option value="2001">2001</option>
                        <option value="2000">2000</option>
                        <option value="1999">1999</option>
                        <option value="1998">1998</option>
                        <option value="1997">1997</option>
                        <option value="1996">1996</option>
                        <option value="1995">1995</option>
                        <option value="1994">1994</option>
                        <option value="1993">1993</option>
                        <option value="1992">1992</option>
                        <option value="1991">1991</option>
                        <option value="1990">1990</option>
                    </select>

                </fieldset>

                <p>
                    … into <strong>styleable drop-down menus</strong> for use in forms or general UI/navigation.
                </p>

                <fieldset>

                    <select tabindex="4" class="dropdown">
                        <option value="" class="label" value="">Month</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="April">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>

                    <select tabindex="5" class="dropdown" data-settings='{"cutOff": 12}'>
                        <option value="" class="label">Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>

                    <select tabindex="6" class="dropdown" data-settings='{"cutOff": 12}'>
                        <option value="" class="label">Year</option>
                        <option value="2013">2013</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2008">2008</option>
                        <option value="2007">2007</option>
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                        <option value="2002">2002</option>
                        <option value="2001">2001</option>
                        <option value="2000">2000</option>
                        <option value="1999">1999</option>
                        <option value="1998">1998</option>
                        <option value="1997">1997</option>
                        <option value="1996">1996</option>
                        <option value="1995">1995</option>
                        <option value="1994">1994</option>
                        <option value="1993">1993</option>
                        <option value="1992">1992</option>
                        <option value="1991">1991</option>
                        <option value="1990">1990</option>
                    </select>

                </fieldset>

                <p>
                    It's like <em><a href="http://sc.admin5.com/" target="_blank">Chosen</a></em> but with only the essential features:
                </p>

                <ul class="text">
                    <li>Clean, semantic markup</li>
                    <li>Form & validation compatibilty</li>
                    <li>Full keyboard control with textual search</li>
                    <li>Inner-scroll for long lists</li>
                    <li>Degradation to native UI on touch devices</li>
                    <li>Fully functional IE8+</li>
                </ul>



                <h3>Latest updates v2.1.0</h3>

                <ul class="text">
                    <li><strong>onSelect</strong> callback option renamed to <strong>onChange</strong></li>
                    <li>Textual search strings reset after 1200ms of keyboard inactivity</li>
                    <li><strong>disable</strong> method added</li>
                    <li><strong>enable</strong> method added</li>
                    <li><strong>select</strong> method added</li>
                    <li><strong>destroy</strong> method added</li>
                    <li>Support for <strong>disabled</strong> attribute on <code><select></code> element added</li>
                    <li>Various bug fixes</li>
                </ul>

                <h3>Available Ready-made Themes</h3>

                <h4>Default / <a href="themes/easydropdown.css">easydropdown.css</a></h4>

                <select class="dropdown" tabindex="7">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                </select>

                <h4>Metro / <a href="themes/easydropdown.metro.css">easydropdown.metro.css</a></h4>

                <select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                </select>

                <h4>Flat / <a href="themes/easydropdown.flat.css">easydropdown.flat.css</a></h4>

                <select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                </select>
            </div>
        </div>
        <p>
             
        </p>
        <p>
             
        </p>
        <p>
             
        </p>
        <p>
             
        </p>
        <p>
             
        </p>
        <p>
             
        </p>
        <p>
             
        </p>
    </section>

    <div style="text-align:center;clear:both">
    </div>
</body>
</html>