How can I hide a <select> arrow in Firefox 30+?

Answer 1

/* For mozilla Firefox 30.0+ I used the following to coverup the reappearing arrow: */

@-moz-document url-prefix() {

.yourClass:after {
    position: absolute;
    margin-left: -25px;
    border-radius: 4px;
    content: url('../images/pathToYourDownArrowImage.svg');
    pointer-events: none;
    overflow: hidden;
}

/* I still use this to move the text over */

.yourClass select {
    text-overflow: '';
    text-indent: -1px;
    -moz-appearance: none;
    background: none;
}

}