Firefox 30.0 - -moz-appearance: none not working

Question

I am using this code to hide the dropdown arrow and its working fine before the update of firefox but now in firefox 30.0 its broken.

select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';

}

Answer 1

I found a solution

select{
  height:20px; // height of the dropdown
  border:0 none; 
  display: flex;
  background: url('image/sample.jpg');
}

Answer 2

This a change in Firefox reported as Bug 649849 - Allow styling of the select element dropdown arrow.

This may be an intentional usability improvement. It is probably best to assume that it is and stop wanting to hide the arrow (which is the browsers’ way of indicating that there is a dropdown menu).

Answer 3

Looks like it could be fixed in future versions https://bugzilla.mozilla.org/show_bug.cgi?id=1017864#c9

Answer 4

If you really want to stick to the lower versions I suggest as a work around that you put the select element inside a container that has an overflow-x hidden. Then hide the dropdown and adjust your background position accordingly to be seen.

e.g
html

<div class="container"><select>.....</div>

css

//assuming bg img is 20px
.container {max-width:200px; overflow-x:hidden;}
.container select.adjustme{width:220px; background: url('image/bg-dropdown.jpg') 180px center; border:0;}

The above will also effect the latest version so you need this javascript below before adding those css

    function get_browser_info(){
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE ',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }
var browser=get_browser_info();

if(browser.version<35){
$('.container select').addClass('adjustme');
}

It's not the prettiest but I hope it will help :)