styleSelect (Widget)

jQuery UI 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>
<label for="test">Test:</label>
<select id="test">
    <option value="">Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

CSS

.dd-selectmenu{
    display: inline-block;
    position: relative;
}
.dd-selectmenu-status{}
.dd-selectmenu-icon{
    position:absolute;
    top:0;
    right:0;
}
.dd-selectmenu-menu{
    position:absolute;
}
.dd-selectmenu-menu ul{}
.dd-selectmenu-menui ul li{}
.dd-selectmenu-menui ul li a{}

JavaScript

(function($) {
    var a = "aria-",
        d = "dd-selectmenu-",
        r = "role",
        isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iP(o|a)d|IEMobile/i) ? true : false;
    $.widget("eb.styleSelect", {
        options: {},
        tah: null,
        taq: "",
        list: null,
        btn: null,
        _create: function() {
            if (isMobile) return;
            var id = this.element.id,
                self = this,
                el = self.element;
            self.list = $("<ul>").attr("id", id + "-menu").addClass(d + "menu").attr(a + "labelledby", id + "-button").attr(a + "hidden", "true").attr(r, "listbox").attr(a + "activedescendant", d + id).hide();
            self.btn = $("<a>").attr("href", "#").attr("id", id + "-button").addClass("dd-selectmenu").attr(a + "owns", id + "-menu").attr(a + "haspopup", "true").attr(r, "button").width(el.width()).append($("<span>").addClass(d + "status")).append($("<span>").addClass(d + "icon").text("u")).mouseup(function(e) {
                e.stopPropagation();
                self.toggleList();
                self.btn.focus();
                return false;
            }).click(function() {
                return false;
            }).keydown(function(e) {
                var ret = false;
                switch (e.keyCode) {
                case $.ui.keyCode.ENTER:
                    ret = true;
                    break;
                case $.ui.keyCode.SPACE:
                    self.toggleList();
                    break;
                case $.ui.keyCode.UP:
                case $.ui.keyCode.LEFT:
                    $("a", $("." + d + id).prev()).click();
                    break;
                case $.ui.keyCode.DOWN:
                case $.ui.keyCode.RIGHT:
                    $("a", $("." + d + id).next()).click();
                    break;
                case $.ui.keyCode.TAB:
                    ret = true;
                    break;
                default:
            ...