What is the correct -moz-appearance value to hide dropdown arrow of a select element

Question

I m trying to style the dropdown arrow of a  lt select gt  element with CSS only   it works perfectly in Chrome Safari   select     -webkit-appearance  button    -webkit-border-radius  2px    -webkit-box-shadow  0px 1px 3px rgba 0  0  0  0 1     -webkit-padding-end  20px    -webkit-padding-start  2px    -webkit-user-select  none     background-image  url    select-arrow1 png       background-position  center right    background-repeat  no-repeat    border  1px solid  AAA    margin  0    padding-top  2px    padding-bottom  2px    width  200px      Which renders beautifully as seen here  By that logic  the only thing I had to do to make it work in Firefox was to add all -webkit-  stuff as -moz-     -moz-appearance  button  -moz-border-radius  2px  -moz-box-shadow  0px 1px 3px rgba 0  0  0  0 1   -moz-padding-end  20px  -moz-padding-start  2px  -moz-user-select  none    It works for 99   the only problem is that the default dropdown arrow doesn t go away  and stays on top of the background image as seen here  It looks like -moz-appearance  button  does not work for a  lt select gt  element  Also -moz-appearance  none  has no effect to remove the default dropdown arrow   So what is the correct value for -moz-appearance to remove the default dropdown arrow    Updates   December 11  2014  Stop inventing new hacks  After 4 and a half years  -moz-appearance none is starting to work since Firefox 35  Although moz-appearance button is still broken  you don t need to use it anyway  Here is a very basic working example    April 28  2014  The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31 0 a1 Nightly on all platforms

User · Accepted Answer

This is it guys  FIXED   Wait and see  https   bugzilla mozilla org show bug cgi id 649849 or workaround  For those wondering  https   bugzilla mozilla org show bug cgi id 649849 c59  First  because the bug has a lot of hostile spam in it  it creates a hostile workplace for anyone who gets assigned to this  Secondly  the person who has the ability to do this  which includes rewriting   has been allocated to another project  b2g  for the time being and wont have time until that project get nearer to completion  Third  even when that person has the time again  there is no guarantee that this will be a priority because  despite webkit having this  it breaks the spec for how  is supposed to work  This is what I was told  I do not personally know the spec   Now see https   wiki mozilla org B2G Schedule Roadmap     The page no longer exists and the bug hasn t be fixed but an acceptable workaround came from Jo  o Cunha  you guys can thank him for now

User · Answer

Update  this was fixed in Firefox v35  See the full gist for details        how to hide the select arrow in Firefox     Just figured out how to do it  The trick is to use a mix of -prefix-appearance  text-indent and text-overflow  It is pure CSS and requires no extra markup   select       -moz-appearance  none      text-indent  0 01px      text-overflow          Long story short  by pushing it a tiny bit to the right  the overflow gets rid of the arrow  Pretty neat  huh   More details on this gist I just wrote  Tested on Ubuntu  Mac and Windows  all with recent Firefox versions

User · Answer

While you can t yet get Firefox to remove the dropdown arrow  see MatTheCat s post   you can hide your  stylized  background image from showing in Firefox   -moz-background-position  -9999px -9999px important    This will position it out of frame  leaving you with the default select box arrow     while keeping the stylized version in Webkit

User · Answer

It is worth trying these 2 options below while we re still waiting for the fix in FF35   select       -moz-appearance  scrollbartrack-vertical      or  select       -moz-appearance  treeview      They will just hide any arrow background image you have put in to custom style your select element  So you get a bog standard browser arrow instead of a horrible combo of both browser arrow and your own custom arrow

User · Answer

In Mac OS -moz-appearance  window  will remove the arrow accrding to the MDN docs here  https   developer mozilla org en-US docs CSS -moz-appearance  Tested on Firefox 13 on Mac OS X 10 8 2  Also see  https   bugzilla mozilla org show bug cgi id 649849 c21

User · Answer

Try putting opacity 0  your select element will be invisible but the options will be visible when you click on it

User · Answer

it is working when adding    select   width 115

User · Answer

To get rid of the default dropdown arrow use    -moz-appearance  window

[css] What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element

Examples related to css

Examples related to firefox

Examples related to webkit

Examples related to gecko