Styling a Select Keeping Default Behavior

This fiddle show a select that gets a different dom element added (div in this case) so that it can be styled with all the possible declarations that a div accepts.

HTML

<form>
    <fieldset>
        <select class="pseudo-me">
            <option value="Option 1">Option 111111</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3 - A Longer Option">Really Really Long Option</option>
        </select>
    </fieldset>
</form>

CSS

body { margin:2%; }

select.pseudo-me,
.pseudo-select,
.select-container {
    top:0;
    left:0;
}

select.pseudo-me,
.pseudo-select,
.pseudo-select .down-arrow,
.pseudo-select .down-arrow-container {
    position:absolute;
}

.select-container { position: relative; }

select.pseudo-me {
    opacity:0;
    z-index:2;
}

.pseudo-select { z-index:1; }

.pseudo-select .down-arrow-container {
    top:0;
    right:0;
}

.pseudo-select .down-arrow {
  display: block;
  border-style:solid;
}

JavaScript

$('select.pseudo-me').each(function() {
    
    var $this = $(this),
        BORDER = ($this.css('border-width') == '' || parseInt($this.css('border-width')) == 0) ? '1px solid #000' : $this.css('border'),
        BORDER_COLOR = ($this.css('border-color') === '') ? '#000' : $this.css('border-color'),
        COLOR = $this.css('color'),
        BORDER_RADIUS = ($this.css('border-radius') == '' || parseInt($this.css('border-radius')) == 0) ? '5px' : $this.css('border-radius');

    $this
        .wrap('<div class="select-container"></div>')
        .after('<div class="pseudo-select"><span class="pseudo-select-text"></span><div class="down-arrow-container"><span class="down-arrow"></span></div></div>')
        .on('change', function() {
            $('.pseudo-select-text').text($(this).children('option:selected').text());
        });
    
    var $downArrow = $('.down-arrow'),
        $downArrowContainer = $('.down-arrow-container');
    
    $('.pseudo-select, .select-container')
        .width($this.innerWidth())
        .height($this.innerHeight());
    
    // the down arrow is calculated as a third of the height of the select
    $downArrow
        .height($this.innerHeight())
        .css({'border-width' : $this.innerHeight() / 2,
              'top'          : $this.innerHeight() / 2,
              'right'        : $this.innerHeight() / 1,
              'border-color' : BORDER_COLOR + ' transparent transparent'});
    
    // setting the height and width the same so that we have proportional spacing based on the select height.
    $downArrowContainer
        .height($this.innerHeight())
        .width($this.innerHeight())
        .css('border-left', BORDER);
    
    $('.pseudo-select')
        .css({'font-family': $this.css('font-family'),
              'font-size': $this.css('font-size'),
              'padding-left': '5px',
              'line-height': $this.innerHeight() + 'px',
              'border': BORDER,
              'color' : COLOR,
             ...