Custom Selects CSS (Hiding arrow on Firefox) (Relatively positioned wrapper with data image background arrows)

custom-select.css

.select-wrapper {
    float: left; /*or right*/
    position: relative;
}

select {
    border: 1px solid #ccc;
    height: 26px;
    line-height: 18px;
    margin: 0;
    padding: 3px;
    background: transparent none no-repeat;
    cursor: pointer;
    width: 100%;
}


@media screen and (min-width:0) {
    /* for relatively modern browsers including IE 8+ */
    select {
        border-radius: 4px;
        background-image: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAlElEQVRIx+2VwQ3AIAhFwTiFi7KC7uYGHo1z0Et7MWkjaEiaQOJBDzy/wgdqrXwHWKyAiGAZDnSgHBhC+IfCUgqbKXxgGqhY4QyRQkUK35KLoK01iZd+xZKXRuEfbvdQPPGkAABEhMeLhohE5yfaAufk93791r13zQDmnLNqcOMYg1NKmoJgTRHtmDeaWZvPQweaAi8PXSmZJU3QRAAAAABJRU5ErkJggg==");
        background-position: -50px -50px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* for Webkit */
    select {
        -webkit-appearance: none;
        background-position: right center;
        padding: 3px 32px 3px 5px;
    }
}

@-moz-document url-prefix() {
    /* for Firefox */
    select {
        display: flex;
        border: 0;
        box-shadow: inset 0 0 1px #808080;
        padding: 0;
        background-position: right center;
        padding-right: 16px;
        color: transparent;
        /* this shifts the text down a few pixels and removes the focus-ring */
        text-shadow: 0 3px 0 #000;
        text-indent: 4px;
    }
    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;
    }
}

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 data image.
 
Example: http://jsfiddle.net/coralsea/gw118dwf/3/
 
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