Zurb Foundation 5 - Selectbox arrow issue on Firefox

Demo for: http://stackoverflow.com/questions/25831598/zurb-foundation-select-input-2-arrows-issue

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<div class=" row">
    <div class="large-2 columns">
        <label>Select Box
            <select>
                <option value="money">Money</option>
                <option value="husker">Husker</option>
                <option value="starbuck">Starbuck</option>
                <option value="hotdog">Hot Dog</option>
                <option value="apollo">Apollo</option>
            </select>
        </label>
    </div>
</div>

CSS

body {
    padding: 30px;
}

@-moz-document url-prefix() {
    select {
        background-image: url(data:image/svg+xml;
        base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
        background-position: 100% center;
        background-repeat: no-repeat;
        padding: 0.5rem;
        text-indent: 0.01px;
        text-overflow: '';
    }
}