styleSelect (Plugin)

jQuery plugin widget to replace <select> tags with HTML that can be easily styled. It provides functionality found in normal drop down select boxes along with ARIA stuff.

by Evan Sharp

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<form>
                    <fieldset>
                        <label for="firstName" class="m-all t1 d1-d3">First name
                            <input type="text" tabindex="1" name="firstName" id="firstName">
                        </label>
                        
                        <label for="lastName" class="m-all t2-t5 d4-d6">Last name
                            <input type="text" tabindex="2" name="lastName" id="lastName">
                        </label>
            
                        <label for="email" class="m-all t1 d1-d3">Email
                            <input type="email" tabindex="3" name="email" id="email">
                        </label>
                        
                        <label for="phone" class="m-all t2-t5 d4-d6">Phone
                            <input type="tel" tabindex="4" name="phone" id="phone">
                        </label>
                        
                        <label for="state" class="m-all t1 d1-d3">State
                            <select tabindex="5" name="state" id="state">
                                <option selected="selected" value="">Please select</option>
                                <option value="AL">Alabama</option>
                                <option value="AK">Alaska</option>
                                <option value="AZ">Arizona</option>
                                <option value="AR">Arkansas</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="DC">District Of Columbia</option>
                                <option value="FL">Florida</option>
                                <option...

CSS

/*  ==================================================
    Copyright 2012 EverBank
    ==================================================  */

/*  ==================================================
    1. RESET
    2. CLEARFIX
    3. GLOBAL OBJECTS
    4. CONTAINERS
    5. TYPOGRAPHY
    6. LINKS
    7. BUTTONS
    8. FORMS
    9. TABLES
    10. HEADER
    11. NAVIGATION
    12. MARQUEES & SECONDARY PROMOS
    13. PRIMARY & SECONDARY CONTENT
    14. FOOTER
    15. CTAs
    16. MEDIA QUERIES
    ==================================================  */


/*  ==================================================
    1. RESET
    ==================================================  */

    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    html {
        font-size: 62.5%;
    }
    
    body {
        line-height: 1;
    }
    
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    
    nav ul {
        list-style: none;
    }
    
    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    input, select {
        vertical-align: middle;
    }

/*  ==================================================
    2. CLEARFIX
   ...

JavaScript

(function($) {
    $.fn.styleSelect = function() {

        //This can be removed if a mobile check is included elsewhere.
        var isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iP(o|a)d|IEMobile/i) ? true : false;

        if (isMobile) return this;

        var slt = this,
            a = "aria-",
            d = "dd-selectmenu-",
            tah, taq = "",
            UP = function(l, b) {
                var o = b.offset();
                l.css({
                    top: o.top + b.outerHeight(false) - 2,
                    left: o.left,
                    width: b.outerWidth(false) - 2
                });
            },
            TL = function(l, b) {
                UP(l, b);
                l.toggle();
            },
            ST = function(l, i) {
                var lt = l.scrollTop(),lh = l.outerHeight(true),it = 0,ih = i.outerHeight(true);
                i.prevAll().each(function(){
                    it += $(this).outerHeight(true);
                });
                if(it<lt){
                    l.scrollTop(it);
                }
                if(it+ih>lt+lh){
                    l.scrollTop(it+ih-lh);
                }
            },
            TA = function(keyCode, list) {
                clearTimeout(tah);
                taq += String.fromCharCode(keyCode).toLowerCase();
                $("li a", list).filter(function() {
                    return $(this).text().toLowerCase().slice(0, taq.length) == taq;
                }).first().trigger("click", [(list.is(":visible"))]);
                tah = setTimeout(function() {
                    taq = "";
                }, 350);
            };
        slt.each(function(i, l) {
            var id = this.id,
                list = $("<ul>").attr("id", id + "-menu").addClass(d + "menu").attr(a + "labelledby", id + "-button").attr(a + "hidden", "true").attr("role", "listbox").attr(a + "activedescendant", d + id).hide(),
                btn = $("<a>").attr("href",...