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.

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 value="GA">Georgia</option>
                                <option value="HI">Hawaii</option>
                                <option value="ID">Idaho</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
    ==================================================  */

/*  MODERN BROWSERS  */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/*  IE 6/7 (TRIGGER hasLayout)  */

.clearfix {
  zoom: 1;
}

/* ...

JavaScript

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

    if ($(html).hasClass("mobile")) 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", "#").attr("id", id + "-button").addClass("dd-selectmenu").attr(a + "owns", id + "-menu").attr(a + "haspopup", "true").attr("role", "button").append($("<span>").addClass(d + "status")).append($("<span>").addClass(d + "icon icon").text("V"));
      btn.mouseup(function(e) {
        e.stopPropagation();
        $("." + d + "menu").not(list).hide();
        TL(list, btn);
        $(this).focus();
        return false;
      }).click(function() {
     ...