Firefox 30.0 - -moz-appearance: no one works

Question

I use this code to hide the down arrow and it works fine before firefox update, but now in firefox 30.0 is 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 change is listed in Firefox as Error 649849 - Allow styling of the down arrow of a selection item.

This may be a deliberate improvement in usability. It is probably best to assume that this is so and no longer wants to hide the arrow (this is the way browsers indicate that there is a drop-down menu).

Answer 3

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

Answer 4

If you really want to stick with lower versions, I suggest, as a work, that you put a select element inside a container with hidden overflow-x. Then hide the drop-down list and adjust your background position accordingly to be seen.

eg
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 affect the latest version, so you need this javascript below before adding these 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'); } 

This is not the most beautiful, but I hope this helps :)