custom select list

by Nick Hulea

HTML

<div class="formblock">
    <fieldset>
        <label for="organizationType">* Type of organization</label>
        <select name="organizationType" id="organizationType" class="sel-3">
            <option value="">Choose</option>
            <option value="Accredited">Accredited California School (Private or Public)</option>
            <option value="Afterschool">School site-based afterschool program</option>
            <option value="Headstart">Headstart or Child Development Center</option>
            <option value="Preschool">Preschool providing academic instruction</option>
            <option value="Non-profit">Non-profit providing academic instruction</option>
            <option value="Other">Other</option>
        </select>
    </fieldset>
</div>

CSS

/* ----- Custom Select ----- */
 .formBlock select.sel-1 {
    cursor: pointer;
    height: 24px;
    width: 116px;
}
.customSelect1 {
    background: url("http://tarpits.org/sites/all/themes/tarpits/images/global/custom-select.png") 0 0 no-repeat;
    cursor: pointer;
    height: 17px;
    *height: 21px;
    /* IE7 */
    padding: 7px 30px 0 10px;
    *padding-top: 3px;
    /* IE7 */
    width: 76px;
}
.customSelect1.hover {
    background-position: -116px 0;
}
.customSelectValue1 {
    width: 76px;
}
.formBlock select.sel-2 {
    cursor: pointer;
    height: 24px;
    width: 260px;
}
.customSelect2 {
    background: url("http://tarpits.org/sites/all/themes/tarpits/images/global/custom-select-260.png") 0 0 no-repeat;
    cursor: pointer;
    height: 17px;
    *height: 21px;
    /* IE7 */
    padding: 7px 30px 0 10px;
    *padding-top: 3px;
    /* IE7 */
    width: 220px;
}
.customSelect2.hover {
    background-position: -260px 0;
}
.customSelectValue2 {
    width: 76px;
}
.formBlock select.sel-3 {
    cursor: pointer;
    height: 24px;
    width: 308px;
}
.customSelect3 {
    background: url("http://tarpits.org/sites/all/themes/tarpits/images/global/custom-select-308.png") 0 0 no-repeat;
    cursor: pointer;
    height: 17px;
    *height: 21px;
    /* IE7 */
    padding: 7px 30px 0 10px;
    *padding-top: 3px;
    /* IE7 */
    width: 268px;
}
.customSelect3.hover {
    background-position: -308px 0;
}
.customSelectValue3 {
    width: 76px;
}

JavaScript

// Custom Select Box Function
$.fn.extend({
    customStyle: function (uniqueSel, options) {
        return this.each(function () {
            $(this).data('customStyle', true);
            var currentSelected = $(this).find(':selected');
            $(this).after('<span class="customSelect' + uniqueSel + '"><span class="customSelectValue' + uniqueSel + '">' + currentSelected.text() + '</span></span>').css({
                position: 'absolute',
                opacity: 0,
                fontSize: $(this).next().css('font-size')
            });
            var selectBox = $(this).next();
            var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBox.css('padding-left')) - parseInt(selectBox.css('padding-right'));
            var selectBoxValue = selectBox.find(':first-child');
            selectBox.css({
                display: 'inline-block'
            });
            selectBoxValue.css({
                width: selectBoxWidth + 38,
                display: 'inline-block'
            });
            var selectBoxHeight = parseInt(selectBox.height()) + parseInt(selectBox.css('padding-top')) + parseInt(selectBox.css('padding-bottom'));
            $(this).height(selectBoxHeight).change(function () {
                selectBoxValue.text($(this).find(':selected').text()).addClass('selected').parent().removeClass('error');
            }).keyup(function (e) {
                $(this).trigger('change');
            });

            // Hover States for Custom Select
            $(this).hover(function () {
                $(this).next('.customSelect' + uniqueSel).addClass('hover');
            }, function () {
                $(this).next('.customSelect' + uniqueSel).removeClass('hover');
            });
        });
    },
    fixCustomStyle: function (force) {
        force = force || false;
        var $el = $(this);
        if (force || $.browser.msie) {
            if (!$el.data('fixed')) {
                $('select', this).customStyle();
          ...