Custom Selects CSS (Hiding arrow on Firefox) (Absolutely positioned wrapper with FA icon)

custom-select.css

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

.select-wrapper {
    font-family: Arial, sans-serif;
    font-size: 12px;
    position: absolute;
}
 
select {
    border: 1px solid #ccc;
    height: 26px;
    line-height: 18px;
    margin: 0;
    padding: 3px;
    background: transparent none no-repeat;
    cursor: pointer;
}
 
@media screen and (min-width:0) {
    /* for relatively modern browsers including IE 8+ */
    .select-wrapper:after {
        font-family: 'FontAwesome';
        content: "\f0d7";
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none; 
        right: 16px;
        top: 50%;
        margin-top: -6px;
        color: transparent #444;
        cursor: pointer;
    }
 
    select { border-radius: 4px;}
}
 
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* for Webkit */
          select {
            -webkit-appearance: none;
            padding: 3px 32px 3px 5px;
          }
    }
 
@-moz-document url-prefix() {
    /* for Firefox */
    select {
        display: flex;
        border: 0;
        box-shadow: inset 0 0 1px #000;
        padding: 0;
        padding-right: 16px;
        color: transparent;
        /* this removes the focus-ring */
        text-shadow: 0 0 #000;
        text-indent: 5px;
    }
    
    select * {
        color: black;
        text-shadow: none;
    }
}
 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* for IE10+ */
    select::-ms-expand {
        display: none;
    }
    select {
        background-position: right center;
        padding-right: 30px;
    }
}
 
:-moz-any(.select-wrapper):after {
    background-color: #fff; /* this is necessary for overcome the caret default browser */   
    z-index: 1; /* this is necessary for overcome the pseudo element */
    }

custom-select.html

<div class="select-wrapper">
    <select>
      <option>Item One</option>
      <option>Item Two</option>
    </select>
</div>

gistfile1.txt

Removes default browser select styles and arrow.  Replaces arrow with Font-Awesome caret.  Containing div with position absolute if width of select is not set.  Tested across browsers.

Example: http://jsfiddle.net/coralsea/xe0Lag8c/2/

Based on this gist: https://gist.github.com/joaocunha/6273016/

and these solutions: 
http://jsfiddle.net/sstur/2EZ9f/ by @sstur
http://jsbin.com/pozomu/4/edit by @Rodrigo-Ludgero