Edit in JSFiddle

(function( $ ) { 
    // Helpers 
    // Allows to render super simple templates:
    // 
    //     renderTemplate("Hello, {name}!", {
    //         name : "John"
    //     }); // returns "Hello, John"
    // 
    var renderTemplate = function ( str, attrArr ) {
        if ( !attrArr ) return str;
        for ( var key in attrArr ) {
            str = str.replace("{" + key + "}", attrArr[key]);
        }
        return str;
    };
    
    // default templates
    var wrapTemplate = "<div class='{class}'>{content}</div>",
        optionsListTemplate = "<ul class='{class}'>{content}</ul>",
        optionTemplate = "<li class='{class}'>{content}</li>";

    // DOM manipulation
    $.fn.selectBox = function( opts ) {
        opts = opts || {};
        // defaults 
        opts = $.extend({
            boxTemplate             : wrapTemplate,
            boxClass                : "select-box-wrap",
            dropdownTogglerTemplate : wrapTemplate,
            dropdownTogglerClass    : "select-box-dropdown-toggler",
            selectedTemplate        : wrapTemplate,
            selectedClass           : "select-box-selected",
            arrowTemplate           : wrapTemplate,
            arrowClass              : "select-box-arrow",
            arrowContent            : "▼",
            dropDownTemplate        : wrapTemplate,
            dropDownClass           : "select-box-dropdown",
            optionsListTemplate     : optionsListTemplate,
            optionListClass         : "select-box-option-list",
            optionTemplate          : optionTemplate,
            optionClass             : "select-box-option"
        }, opts );
        
        return this.each( function() {
            var selectBox = $(this),
                options = selectBox.find('option'),
                html = [],
                i = 0, len = options.length,
                currentOption, currentOptionClasses, 
                currentOptionContent;
            
            // Hide original select box
            selectBox.css('display', 'none');
            
            // Options
            for ( ; i < len; i += 1 ) {
                currentOption = options[ i ];
                html.push( renderTemplate( opts.optionTemplate, {
                    "class" : options[ i ].className +
                            " " + opts.optionClass,
                    content : options[ i ].innerHTML
                } ) );
            }
            
            // Options List
            html = renderTemplate( opts.optionsListTemplate, { 
                "class" : opts.optionListClass,
                content : html.join('')
            });
            
            // Drop Down
            html = renderTemplate( opts.dropDownTemplate, {
                "class" : opts.dropDownClass,
                content : html
            });
            
            // Select Box
            html = [
                // Drop Down Toggler ( selected + arrow )
                renderTemplate( opts.dropdownTogglerTemplate, {
                    "class" : opts.dropdownTogglerClass,
                    content : [
                        // Content
                        renderTemplate( opts.selectedTemplate, {
                            "class" : opts.selectedClass,
                            content : options.filter(":selected").html()
                        }),
                        // Arrow
                        renderTemplate( opts.arrowTemplate, {
                            "class" : opts.arrowClass,
                            content : opts.arrowContent
                        })
                    ].join('')
                }),
                // DropDown
                // trick to hide dropdown and still have a string
                $('<div>').append( $( html ).hide() ).remove().html()
            ].join('');
            
            html = renderTemplate( opts.boxTemplate, {
                "class" : opts.boxClass,
                content : html
            });
            
            // Insert pseudo-select box into DOM
            selectBox
                .after( html );
            
            pseudoSelectBox = selectBox.next();
            
            // toggle drop-down
            pseudoSelectBox
                .find( '.' + opts.dropdownTogglerClass )
                .bind( 'click', function( e ) {
                    $(this).next().toggle();
                } );
            
            // select option
            pseudoSelectBox
                .find( '.' + opts.optionClass )
                .bind( 'click', function( e ) {
                    var thisOption = $(this);
                    pseudoSelectBox
                        .find( '.' + opts.selectedClass ) 
                        .html( thisOption.html() );
                    options.attr( 'selected', false );
                    options[ thisOption.index() ].selected = true;
                } );
            
        }); // this.each
    };// $.fn.selectBox
})(jQuery);

$('select').selectBox();
<select class="whoa">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

/* wrapping element */
.select-box-wrap {
}
/* selected text + arrow wrapper */
.select-box-dropdown-toggler {
}
/* selected text */
.select-box-selected {
}
/* toggler arrow */
.select-box-arrow {
}
/* dropdown wrapper */
.select-box-dropdown {
}
/* list of options (ul) */
.select-box-option-list {
}
/* option */
.select-box-option {
}