SelectBox디자인변경

selectBox 디자인 변경

HTML

<select id="test1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<hr/>
<button id="disabledBtn">setDisabled</button><button id="enableBtn">setEnable</button>

CSS

/* Dropdown control */
.selectBox-dropdown {
    min-width: 150px;
    position: relative;
    border: solid 1px #BBB;
    line-height: 1.5;
    text-decoration: none;
    text-align: left;
    color: #000;
    outline: none;
    vertical-align: middle;
    background: #F2F2F2;
    background: -moz-linear-gradient(top, #F8F8F8 1%, #E1E1E1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #F8F8F8), color-stop(100%, #E1E1E1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#E1E1E1', GradientType=0);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    cursor: default;
}

.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow {
    border-color: #666;
}

.selectBox-dropdown.selectBox-menuShowing {
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.selectBox-dropdown .selectBox-label {
    padding: 2px 8px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.selectBox-dropdown .selectBox-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 100px;
    background: url(jquery.selectBox-arrow.gif) 50% center no-repeat;
    border-left: solid 1px #BBB;

}


/* Dropdown menu */
.selectBox-dropdown-menu {
    position: absolute;
    z-index: 99999;
    height: 200px;
    min-height: 1em;
    border: solid 1px #BBB; /* should be the same border width as .selectBox-dropdown */
    background: #FFF;
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    box-shadow: 0...

JavaScript

/*
 *  jQuery selectBox - A cosmetic, styleable replacement for SELECT elements
 *
 *  Copyright 2012 Cory LaViska for A Beautiful Site, LLC.
 *
 *  https://github.com/claviska/jquery-selectBox
 *
 *  Licensed under both the MIT license and the GNU GPLv2 (same as jQuery: http://jquery.org/license)
 *
 */
if (jQuery)(function($) {
    $.extend($.fn, {
        selectBox: function(method, data) {
            var typeTimer, typeSearch = '',
                isMac = navigator.platform.match(/mac/i);
            //
            // Private methods
            //
            var init = function(select, data) {
                    var options;
                    // Disable for iOS devices (their native controls are more suitable for a touch device)
                    if (navigator.userAgent.match(/iPad|iPhone|Android|IEMobile|BlackBerry/i)) return false;
                    // Element must be a select control
                    if (select.tagName.toLowerCase() !== 'select') return false;
                    select = $(select);
                    if (select.data('selectBox-control')) return false;
                    var control = $('<a class="selectBox" />'),
                        inline = select.attr('multiple') || parseInt(select.attr('size')) > 1;
                    var settings = data || {};
                    control.width(select.outerWidth()).addClass(select.attr('class')).attr('title', select.attr('title') || '').attr('tabindex', parseInt(select.attr('tabindex'))).css('display', 'inline-block').bind('focus.selectBox', function() {
                        if (this !== document.activeElement && document.body !== document.activeElement) $(document.activeElement).blur();
                        if (control.hasClass('selectBox-active')) return;
                        control.addClass('selectBox-active');
                        select.trigger('focus');
                    }).bind('blur.selectBox', function() {
                        if...