How to remove the arrow from a select element in Firefox

Question

I m trying to style a select element using CSS3  I m getting the results I desire in WebKit  Chrome   Safari   but Firefox isn t playing nicely  I m not even bothering with IE   I m using the CSS3 appearance property  but for some reason I can t shake the drop-down icon out of Firefox    Here s an example of what I m doing  http   jsbin com aniyu4 2 edit   dropdown    -moz-appearance  none   -webkit-appearance  none   appearance  none   background  transparent url  example png   no-repeat right center   padding  2px 30px 2px 2px   border  none      As you can see  I m not trying for anything fancy  I just want to remove the default styles and add in my own drop-down arrow  Like I said  great in WebKit  not great in Firefox  Apparently  the -moz-appearance  none doesn t get rid of the drop-down item   Any ideas  No  JavaScript is not an option

User · Answer

The appearance property from CSS3 does not allow none value  Take a look at the W3C reference  So  what you is trying to do isn t valid  indeed Chrome shouldn t accept too    Then unfortunatelly we really don t have any cross-browser solution to hide that arrow using pure CSS  As pointed  you will need JavaScript   I suggest you to consider using selectBox jQuery plugin  It s very lightweight and nicely done

User · Answer

A lot of Discussions Happening here  amp  there but I don t see some proper solution for this problem  Finally Ended up by writing a small Jquery   CSS code for doing this HACK on IE  amp  Firefox   Calculate Element Width  SELECT Element  using Jquery  Add a Wrapper Around Select Element and Keep overflow hidden for this element  Make sure that Width of this wrapper is appox  25px less as that of SELECT Element  This could be easily done with Jquery  So Now Our Icon is Gone    and it is time for adding our image icon on SELECT element       Just add few simple lines for adding background and you are all Done     Make sure to use overflow hidden for outer wrapper   Here is a Sample of Code which was done for Drupal  However could be used for others also by removing few lines of code which is Drupal Specific         Jquery Code for Removing Dropdown Arrow      by  North Web Studio      function        Drupal behaviors nwsJS         attach  function context  settings              form-select   once  nws-arrow   function              wrap width     this  outerWidth             element width    wrap width   20            this  css  width    element width             this  wrap   lt div class  nws-select  gt  lt  div gt               this  parent   nws-select   css  width    wrap width                           jQuery               CSS Code for Removing Dropdown Arrow      by  North Web Studio       nws-select     border  1px solid  ccc    overflow  hidden    background  url     images icon png   no-repeat 95  50      nws-select  form-select     border  none    background  transparent      Solution works on All Browsers IE  Chrome  amp  Firefox No need of Adding fixed Widths Hacks Using CSS  It is all being handled Dynamically using JQuery    More Described at - http   northwebstudio com blogs 1 jquery remove-drop-down-arrow-html-select-element-using-jquery-and-css

User · Answer

This works  tested on Firefox 23 0 1    select       -moz-appearance  radio-container

User · Answer

I think I found the solution compatible with FF31    Here are two options that are well explained at this link  http   www currelis com hiding-select-arrow-firefox-30 html  I used option 1   Rodrigo-Ludgero posted this fix on Github  including an online demo  I tested this demo on Firefox 31 0 and it appears to be working correctly  Tested on Chrome and IE as well  Here is the html code    lt  DOCTYPE html gt   lt html gt       lt head gt       lt meta charset  utf-8  gt       lt title gt Custom Select lt  title gt       lt link href  http   netdna bootstrapcdn com font-awesome 4 0 3 css font-awesome min css  rel  stylesheet  type  text css    gt       lt  head gt       lt body gt           lt div class  custom-select fa-caret-down  gt               lt select name    id    gt                   lt option value    gt Custom Select lt  option gt                   lt option value    gt Custom Select lt  option gt                   lt option value    gt Custom Select lt  option gt               lt  select gt           lt  div gt       lt  body gt   lt  html gt    and the css    custom-select       background-color   fff      border  1px solid  ccc      -webkit-box-sizing  border-box      -moz-box-sizing  border-box      box-sizing  border-box      margin  0 0 2em      padding  0      position  relative      width  100       z-index  1      custom-select hover       border-color   999      custom-select before       color   333      display  block      font-family   FontAwesome       font-size  1em      height  100       line-height  2 5em      padding  0 0 625em      position  absolute      top  0      right  0      text-align  center      width  1em      z-index  -1      custom-select select       background-color  transparent      border  0 none      box-shadow  none      color   333      display  block      font-size  100       line-height  normal      margin  0      padding   5em      width  100       -webkit-box-sizing  border-box      -moz-box-sizing  border-box      box-sizing  border-box      -webkit-appearance  none      -moz-appearance  none      appearance  none      custom-select select  -ms-expand       display  none     to ie 10        custom-select select focus       outline  none       little trick for custom select elements in mozilla firefox  17 06 2014  rodrigoludgero     -moz-any  custom-select  before       background-color   fff     this is necessary for overcome the caret default browser        pointer-events  none       z-index  1     this is necessary for overcome the pseudo element        http   jsbin com pozomu 4 edit  It works very good for me

User · Answer

If you don t mind fiddling with JS  I wrote a small jQuery plugin that helps you do it  With it you don t need to worry about vendor prefixes      fn magicSelectBox   function       var  e   this      e each function         var  select     this        var  magicbox       lt div gt  lt  div gt    attr  class    select attr  class    attr  style    select attr  style    addClass  magicbox        var  innermagicbox       lt div gt  lt  div gt    css         position   relative         height   100               var  text       lt span gt  lt  span gt    css         position   absolute         text  select find  option selected   text           select attr  class   null  css         width   100          height   100          opacity  0        position   absolute         on  change   function            text text  select find  option selected   text                   select parent   append  magicbox        innermagicbox append  text   select        magicbox append  innermagicbox            return  e       Fiddle here   JS Fiddle  The condition is that you have to style the select from scratch  this means setting the background and border   but you probably want to do this anyway    Also since the function substitutes the original select with a div  you will lose any styling done directly on the select selector in your CSS  So give the select element a class and style the class   Supports most modern browsers  if you want to target older browsers  you can try an older version of jQuery  but perhaps have to replace on   with  bind   in the function   not tested

User · Answer

Or  you can clip the select  Something along the lines of   select   width 200px  position absolute  clip rect 0  170px  50px  0       This should clip 30px of the right side of select box  stripping away the arrow  Now supply a 170px background image and voila  styled select

User · Answer

building on the answer by  Jo  oCunha  one css style that is usefull for more then one browser  select         for firefox       -moz-appearance  none        for chrome       -webkit-appearance none      text-indent  0 01px      text-overflow          for IE10   select  -ms-expand       display  none

User · Answer

Further to Joao Cunha s answer  this problem is now on Mozilla s ToDo List and is targeted for ver 35   For those desiring  here is a workaround by Todd Parker  referenced on Cunha s blog  that works today   http   jsfiddle net xvushd7x   HTML    lt label class  wrapper  gt This label wraps the select      lt div class  button custom-select ff-hack  gt           lt select gt               lt option gt Apples lt  option gt               lt option gt Bananas lt  option gt               lt option gt Grapes lt  option gt               lt option gt Oranges lt  option gt               lt option gt A very long option name to test wrapping lt  option gt           lt  select gt       lt  div gt   lt  label gt    CSS      Label styles  style as needed    label     display block    margin-top 2em    font-size  0 9em    color  777        Container used for styling the custom select  the buttom class below adds the bg gradient  corners  etc      custom-select     position  relative    display block    margin-top 0 5em    padding 0        These are the  theme  styles for our button applied via separate button class  style as you like     button     border  1px solid  bbb    border-radius   3em    box-shadow  0 1px 0 1px rgba 0 0 0  04     background   f3f3f3     Old browsers      background  -moz-linear-gradient top   ffffff 0    e5e5e5 100       FF3 6       background  -webkit-gradient linear  left top  left bottom  color-stop 0   ffffff   color-stop 100   e5e5e5       Chrome Safari4       background  -webkit-linear-gradient top   ffffff 0   e5e5e5 100       Chrome10  Safari5 1       background  -o-linear-gradient top   ffffff 0   e5e5e5 100       Opera 11 10       background  -ms-linear-gradient top   ffffff 0   e5e5e5 100       IE10       background  linear-gradient to bottom   ffffff 0   e5e5e5 100       W3C          This is the native select  we re making everything but the text invisible so we can see the button styles in the wrapper     custom-select select     width 100     margin 0    background none    border  1px solid transparent    outline  none       Prefixed box-sizing rules necessary for older browsers      -webkit-box-sizing  border-box    -moz-box-sizing  border-box    box-sizing  border-box       Remove select styling      appearance  none    -webkit-appearance  none       Font size must the 16px or larger to prevent iOS page zoom on focus      font-size 16px       General select styles  change as needed      font-family  helvetica  sans-serif    font-weight  bold    color   444    padding   6em 1 9em  5em  8em    line-height 1 3         Custom arrow sits on top of the select - could be an image  SVG  icon font  etc  or the arrow could just baked into the bg image on the select  Note this si a 2x image so it will look bad in browsers that don t support background-size  In production  you d handle this resolution switch via media query but this is a demo       custom-select  after     content        position  absolute    width  9px    height  8px    top  50     right  1em    margin-top -4px    background-image  url http   filamentgroup com files select-arrow png     background-repeat  no-repeat    background-size  100     z-index  2       These hacks make the select behind the arrow clickable in some browsers      pointer-events none         Hover style     custom-select hover     border 1px solid  888        Focus style     custom-select select focus     outline none    box-shadow  0 0 1px 3px rgba 180 222 250  1     background-color transparent    color   222    border 1px solid  aaa        Set options to normal weight     custom-select option     font-weight normal

User · Answer

Would you accept minor changes to the html   Something like putting a div tag containing the select tag   Take a look

User · Answer

Use the pointer-events property    The idea here is to overlay an element over the native drop down arrow  to create our custom one  and then disallow pointer events on it   see this post   Here is a working FIDDLE using this method   Also  in this SO answer I discussed this and another method in greater detail

User · Answer

try this css  select         for firefox       -moz-appearance  none        for chrome       -webkit-appearance none      Its working

User · Answer

hackity hack     a solution that works in every browser I ve tested  Safari  Firefox  Chrome   Don t have any IEs lying around  so it would be nice if you could test and comment    lt div class  wrapper  gt     lt select gt       lt option gt 123456789 lt  option gt       lt option gt 234567890 lt  option gt     lt  select gt   lt  div gt    CSS  with url-encoded image    wrapper   position relative  width 200px     wrapper after     content       display  block    position  absolute    top 1px  height 28px    right 1px  width 16px    background-image  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw eHBhY2tldCBiZWdpbj0i77u IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24 IDwvcmRmOlJERj4gPC94OnhtcG1ldGE IDw eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc LxvN9AqGJTKQJMcYQM  VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg        pointer-events  none     select     width  100     padding 3px    margin  0    border-radius  0    border 1px solid black    outline none    display  inline-block    -webkit-appearance none    -moz-appearance none    appearance none    cursor pointer    float none important    background white     font-size 13px    line-height  1em    height  30px    padding 6px 20px 6px 10px      http   codepen io anon pen myPEBy  I m using the  after-element to cover the ugly arrow  Since select doesn t support  after  i need a wrapper to work with  Now  if you would click on the arrow  the dropdown won t register it     unless your browser supports pointer-events  none  which everyone except IE10- does  http   caniuse com  feat pointer-events  So for me it s perfect - a nice  clean  low-headache solution  at least compared to all the other options which include javascript   tl dr   If IE10  or lower  Users click the arrow  it won t work  Works good enough for me

User · Answer

It s a huge hack  but -moz-appearance  menulist-text might do the trick

User · Answer

We ve found a simple and decent way to do this  It s cross-browser degradable  and doesn t break a form post  First set the select box s opacity to 0    select        opacity   0      width  200px      height  15px      lt select class  select  gt       lt option value  foo  gt bar lt  option gt       lt  select gt    this is so you can still click on it  Then make div with the same dimensions as the select box  The div should lay under the select box as the background  Use   position  absolute   and z-index to achieve this    div       width  200px      height  15px      position  absolute      z-index  0      lt div class   div  gt  the text of the the current selection updated by javascript  lt  div gt   lt select class  select  gt       lt option value  foo  gt bar lt  option gt       lt  select gt    Update the div s innerHTML with javascript   Easypeasy with jQuery       select   click function event              div   html     select option selected   val         That s it  Just style your div instead of the select box  I haven t tested the above code so you ll probably need tweak it  But hopefully you get the gist    I think this solution beats  -webkit-appearance  none    What browsers should do at the very most is dictate interaction with form elements  but definitely not how their initially displayed on the page as that breaks site design

User · Answer

I am styling the select just likes this   lt select style       -moz-appearance  radio-container                  -webkit-appearance  none                   appearance  none    gt    It works for me in FF  Safari and Chrome in all versions I ve tested   In IE I put    select  -ms-expand    display  none      to remove in all selects     Also you can          yourclass  -ms-expand  display  none             yourid  -ms-exapan  display  none

User · Answer

Important Update   As of Firefox V35 the appearance property now works     From firefox s official release notes on V35      Using -moz-appearance with the none value on a combobox now remove   the dropdown button  bug 649849     So now in order to hide the default arrow - it s as easy as adding the following rules on our select element   select      -webkit-appearance  none     -moz-appearance  none     appearance  none      DEMO   x000D   x000D  select   x000D    margin  50px  x000D    border  1px solid  111  x000D    background  transparent  x000D    width  150px  x000D    padding  5px  x000D    font-size  16px  x000D    border  1px solid  ccc  x000D    height  34px  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    x000D   lt select gt  x000D     lt option gt Apples lt  option gt  x000D     lt option selected gt Pineapples lt  option gt  x000D     lt option gt Chocklate lt  option gt  x000D     lt option gt Pancakes lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I was having the same issue  It s easy to make it work on FF and Chrome  but on IE  8  that we need to support  things get complicated  The easiest solution I could find for custom select elements that works  everywhere I tried   including IE8  is using  customSelect

User · Answer

Unfortunately for you this is  something fancy   Normally it s not the web authors place to redesign form elements  Many browsers purposely don t let you style them  in order for the user to see the OS controls they are used to    The only way to do this consistently over browsers and operating systems  is use JavaScript and replace the select elements with  DHTML  ones   Following article show three jQuery based plugins that allow you to do that  it is a bit old  but I couldn t find anything current right now   http   www queness com post 204 25-jquery-plugins-that-enhance-and-beautify-html-form-elements 1

User · Answer

Try this in FF30  Covers up the arrow  turns off the background        still lets you style the border around the image and allows selection on the arrow       -moz-document url-prefix           yourClass select           text-overflow              text-indent  -1px          -moz-appearance  none          background  none                fix for popup in FF30         yourClass after           position  absolute          margin-left  -27px          height  22px          border-top-right-radius  6px          border-bottom-right-radius  6px          content  url     images yourArrow svg            pointer-events  none          overflow  hidden          border-right  1px solid  yourBorderColour          border-top  1px solid  yourBorderColour          border-bottom  1px solid  yourBorderColour

User · Answer

You could increase the width of the box and move the arrow closer to the left of the arrow  this then allows you to cover the arrow with an empty white div   Have a look  http   jsbin com aniyu4 86 edit

User · Answer

I know this question is a bit old  but since it turns up on google  and this is a  new  solution   appearance  normal Seems to work fine in Firefox for me  version 5 now   but not in Opera and IE8 9  As a workaround for Opera and IE9  I used the  before pseudoselector to create a new white box and put that on top of the arrow   Unfortunately  In IE8 this doesn t work  The box is rendered correctly  but the arrow just sticks out anyway     -   Using select before works fine in Opera  but not in IE  If I look at the developer tools  I see it is reading the rules correctly  and then just ignores them  they re crossed out   So I use a  lt span class  selectwrap  gt  around the actual  lt select gt    select     -webkit-appearance  normal    -moz-appearance  normal    appearance  normal     selectwrap   position  relative     selectwrap before     content        height  0    width  0    border   9em solid red    background-color  red    position  absolute    right  - 1em    z-index  42      You may need to tweak this a bit  but this works for me   Disclaimer  I m using this to get a good looking hardcopy of a webpage with forms so I don t need to create a second page  I m not a 1337 haxx0r who wants red scrollbars   lt marquee gt  tags  and whatnot  -  Please do not apply excessive styling to forms unless you have a very good reason

User · Answer

Try this way   -webkit-appearance  button  -moz-appearance  button    Then  you can use a different image as background and place it   background-image  url images select-arrow png   background-position  center right  background-repeat  no-repeat    There is another way for moz browsers   text-indent 10px    If you have a defined a width to you select  this property will push the default dropbox button under the select area   It works for me

User · Answer

The trick that works for me is to  make select width more than 100  and apply overflow hidden  select       overflow hidden      width  120       This is the only way right now to hide dropdown arrow in FF   BTW  if you want beautiful dropdowns use http   harvesthq github com chosen

User · Answer

Update  this was fixed in Firefox v35  See the full gist for details     Just figured out how to remove the select arrow from Firefox  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          Tested on Windows 8  Ubuntu and Mac  latest versions of Firefox   Live example  http   jsfiddle net joaocunha RUEbp 1   More on the subject  https   gist github com joaocunha 6273016

User · Answer

A useful hack for me is to set the  selects  display to inline-flex   Cuts the arrow right out of my select button   Without all of the added code    For Fx only  -webkit appearance still needed for Chrome  etc

User · Answer

Since Firefox 35   -moz-appearance none  that you already wrote in your code  finally remove arrow button as desired   It was a bug solved since that version

User · Answer

The other answers didn t seem to work for me  but I found this hack  This worked for me  July 2014   select   -moz-appearance  textfield  important          In my case  I also had a woocommerce input field so I used this    woocommerce  quantity input qty   -moz-appearance  textfield  important       Updated my answer to show select rather than input

User · Answer

While not a complete solution I ve found that     -moz-appearance  window       works to some extent  You can t change the background  -color or -image  but the element can be rendered invisible with color  transparent  Not perfect but it s a start and you don t need to replace the system level element with a js one

User · Answer

Jordan Young s answer is the best   But if you can t or don t want to change your HTML  you might consider just removing the custom down arrow served to Chrome  Safari  etc and leaving firefox s default arrow - but without double arrows resulting   Not ideal  but a good quick fix that doesn t add any HTML and doesn t compromise your custom look in other browsers    lt select gt     lt option value  1  gt  First option  lt  option gt     lt option value  2  gt  Second option  lt  option gt   lt  select gt    CSS   select      background-image  url  images select arrow gif       background-repeat  no-repeat     background-position  right center     padding-right  20px      -moz-document url-prefix       select       background-image  none

User · Answer

Okay  I know this question is old  but 2 years down the track and mozilla have done nothing    I ve come up with a simple workaround    This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style  but should only apply to firefox    Say this is your select menu     lt select class  css-select  gt     lt option value  1  gt  First option  lt  option gt     lt option value  2  gt  Second option  lt  option gt   lt  select gt    And lets assume the css class  css-select  is     css-select      background-image  url  images select arrow gif       background-repeat  no-repeat     background-position  right center     padding-right  20px      In firefox  this would display with the select menu  followed by the ugly firefox select arrow  followed by your nice custom looking one  Not ideal    Now to get this going in firefox  add a span element around with the class  css-select-moz         lt span class  css-select-moz  gt        lt select class  css-select  gt          lt option value  1  gt  First option  lt  option gt          lt option value  2  gt  Second option  lt  option gt        lt  select gt      lt  span gt    Then fix the CSS to hide mozilla s dirty arrow with -moz-appearance window and throw the custom arrow into the span s class  css-select-moz   but only get it to display on mozilla  like this     css-select      -moz-appearance window     background-image  url  images select arrow gif       background-repeat  no-repeat     background-position  right center     padding-right  20px      -moz-document url-prefix      css-select-moz       background-image  url  images select arrow gif         background-repeat  no-repeat       background-position  right center       padding-right  20px           Pretty cool for only stumbling across this bug 3 hours ago  I m new to webdesign and completely self-taught   However  this community has indirectly provided me with so much help  I thought it was about time I give something back    I have only tested it in firefox  mac  version 18  and then 22  after I updated     All feedback is welcome

[html] How to remove the arrow from a select element in Firefox

Examples related to html

Examples related to firefox

Examples related to css