Style Select (with multiple) jQuery UI Widget

This is a complete rewrite from my first style select (both from the jQuery plugin and the first widget). This brings more organization (and code) along with the multiple select feature. Note the images should be replaced with checkboxes (checked and unchecked) images. Or TODO: use native checkboxes (not sure if I should.)

by Evan Sharp

HTML

<h1>Custom UI for &lt;select&gt;</h1>


<h2>Via CSS and JS. (The default HTML stays the same!)</h2>

<p>Full (as much as I could find) Aria and keyboard controls for accessibility!
  Easy to style easy to use, jQuery UI widget.</p>
<br />
<label for="ms">Multiple Select
  <select id="ms" style="" multiple="multiple">
    <option value="open" selected="selected">Open an account</option>
    <option value="change" selected="selected">Make account changes</option>
    <option value="move">Move money</option>
  </select>
</label>
<small>The images used as the checkboxes could be replaced with checkbox images matching your UI.</small>

<br
/>
<br />
<label for="s">Normal Select
  <select id="s" style="">
    <option value="">Please Select</option>
    <option value="open">Open an account</option>
    <option value="change" selected="selected">Make account changes</option>
    <option value="move">Move money</option>
  </select>
</label>
<br />
<br />
<label for="lms">Large Mulitple Select
  <select id="lms" name="State" multiple="multiple">
    <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 value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
...

CSS

label{
  display:block;
  width: 250px;
}
    input, select {
      vertical-align: middle;
    }
    /* ICON FONT */
    @font-face {
      font-family:'icons';
      src: url('../_type/ebicons-webfont.eot');
      src: url('../_type/ebicons-webfont.eot?#iefix') format('embedded-opentype'), url('../_type/ebicons-webfont.woff') format('woff'), url('../_type/ebicons-webfont.ttf') format('truetype'), url('../_type/ebicons-webfont.svg#icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    .icon {
      font-family:'icons' !important;
      position: relative;
      text-transform: none !important;
    }
    select {
      border: 1px solid rgb(127, 175, 178);
      border-radius: 3px;
      -moz-box-shadow: inset 0px 5px 8px rgba(150, 150, 150, 0.25);
      -webkit-box-shadow: inset 0px 5px 8px rgba(150, 150, 150, 0.25);
      box-shadow: inset 0px 5px 8px rgba(150, 150, 150, 0.25);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      color: rgb(75, 75, 75);
      display: block;
      padding: 7px 5px;
      width: 95%;
    }
    select:focus {
      color: rgb(0, 0, 0);
      outline: none;
    }
    select.styled {
        left: -99999px;
        position: absolute;
    }
    .dd-selectmenu, .dd-selectmenu:focus {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid rgb(127, 175, 178);
      border-radius: 3px;
      box-shadow: 0 5px 8px rgba(150, 150, 150, 0.25) inset;
      background-color: rgb(255, 255, 255);
      color: rgb(75, 75, 75);
      display: block;
      outline: none;
      padding: 4px 30px 4px 5px;
      position: relative;
      width: 95%;
      text-decoration: none !important;
    }
    .dd-selectmenu-status, .dd-selectmenu-status:hover, .dd-selectmenu-status:focus {
      text-decoration: none;
      text-transform: none !important;
    }
    .dd-selectmenu-icon {
      color:...

JavaScript

(function ($) {
  var aria = "aria-",
    d = "dd-selectmenu-",
    selected = "selected",
    value = "value";
  $.widget("eb.styleSelect", {
    _tah: null,
    _taq: "",
    _list: null,
    _button: null,
    _status: null,
    _ready: false,
    _destroy: function () {
      var $this = this;
      $this._button.add($this._list).remove();
      $this.element.removeClass("styled").removeAttr("tabindex");
    },
    _create: function () {
      var $this = this,
        element = $this.element,
        id = element.attr("id"),
        attributes = {};
      attributes[aria + "labelledby"] = id + "-button";
      attributes[aria + "hidden"] = true;
      attributes[aria + "activedescendant"] = d + id;
      if (element.is("[multiple]")) {
        $this._multi = true;
        attributes[aria + "multiselectable"] = true;
      }
      $this._list = $("<ul>").attr($.extend(attributes, {
        id: id + "-menu",
          "class": d + "menu" + ($this._multi ? " multi" : ""),
        role: "listbox"
      })).mouseup(function (e) {
        e.stopPropagation();
      }).hide();
      attributes = {};
      attributes[aria + "owns"] = id + "-menu";
      attributes[aria + "haspopup"] = true;
      $this._status = $("<span>").addClass(d + "status");
      $this._button = $("<a>").attr($.extend(attributes, {
        href: "#",
        id: id + "-button",
          "class": "dd-selectmenu",
        role: "button"
      })).append($this._status, $("<span>").addClass(d + "icon icon").text("V")).mouseup(function (e) {
        e.stopPropagation();
        $("." + d + "menu").not($this._list).hide();
        $this._toggleList();
        $this._button.focus();
        return false;
      }).click(function () {
        return false;
      }).blur(function () {
        element.blur();
      }).keypress(function (e) {
        var ret = false,
          visible = false,
          keyCode = (e.keyCode ? e.keyCode : e.which);
        if (!$this._list.is(":visible")) visible =...