How to remove the arrow from a select element in Firefox

html firefox css

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

There is a bug report about this now: bugzilla.mozilla.org/show_bug.cgi?id=649849

Chosen is a JavaScript library that styles your selects for you and makes them look really fancy. Might be worth looking into although it probably won't solve your problem.

You might find this blog post useful: red-team-design.com/making-html-dropdowns-not-suck

Looks like they've added the -moz-appearance CSS3 property, I'm using -moz-appearance: none; and it appears to be working in version 35.0.1.

A simple fix would be to make the select element wider than the container. And wrap a mozilla url-prefix so the options are only wider in firefox. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }

João Cunha

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

I have a special place in my usually cold heart for hacky fixes like this. It's rather brilliant. The only downside is that FF leaves a space at the end of the dropdown text area (between the actual text and the end of the select box), which creates an inconsistent spacing between FF and the other browsers, but that's only a minor quibble. Nice find.

Nice catch, @RussellUresti. But considering the whole idea might be to provide a modified arrow, the space actually proves itself useful. I played a bit with it, and adding padding-right:10px; to the <select> will "push" the now invisible arrow to the left. Bottomline: Firefox HIDES the arrow, Chrome REMOVES it. Will update my writings accordingly, thanks for that.

I added an bit of a crossbrowser (haven't tested in old versions of IE) as an answer so you can update yours

Best solution for me, as -moz-appearence: window doesn't work with transparent backgrounds (draw an ugly bg in place, at least on firefox linux)

Because this removes the arrow altogether, the resulting <select> looks like a textbox and it's rather ugly. So you can add a background image back in to make it look like a dropdown: codepen.io/anon/pen/nvfCq

Jordan Young

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:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

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':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

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.

And after 2 years, this is the best answer that's been posted to achieve my desired result. I've put a JSBin of the code here: jsbin.com/aniyu4/2440/edit for others to view, and made only 1 minor CSS update. The span was wider than the select in FF, due to the right padding - this meant clicking the arrow didn't activate dropdown. To adjust for this, I've put a negative right margin on the select element to pull the width of the span back in, to overlap the width of the select.

Oh of course! Thanks very much, Russell. Really glad this helped.

Didn't work for me on FF 23-24 in Windows (I tried the jsbin in the comment). Ended up using tis workaround stackoverflow.com/questions/6787667/…

It doesn't work on FF 30 anymore. Please go ahead and submit a ticket on Mozilla's website: bugzilla.mozilla.org/show_bug.cgi?id=649849. The more people complain about it, the better chance we have of them fixing it.

Works on FF 31 on Mac only.

opengrid

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/

This has no effect for me. FF 6.0.2

Good solution for IE as well. In my solution I set the containing div element to overflow: hidden and then made the width of the select larger. Works great.

@Charlie S: try to put the overflow:hidden on the containing div. It works for me with taht

when you expand the dropdown, the overflow:hidden doesn't work

Works well for me. It makes the dropdown list slightly wider than the top bit but that's a price I'm willing to pay.

Danield

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

select { margin: 50px; border: 1px solid #111; background: transparent; width: 150px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

Igor Ivancha

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;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

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;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

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.

It's not a bad solution, and is similar to a pattern I've seen for styling the file upload input element, but there are several disadvantages. First, it relies on JS, which isn't ideal. Second, if the form has a reset button, you then have to script that functionality in as well (right now, the JS only listens to the click for the select element, but doesn't respond to a form.reset event). Replacing the select element with a div will work, but, ideally, we could just style the appearance of form elements. There are also accessibility issues concerned with both JS and default form behavior.

ninja_corp

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! ;)

Stuart Badminton

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.

Yeah, I noticed that window had that effect, unfortunately, I needed to set the background image. It's unfortunate that this isn't very good in Firefox.

It is unfortunate that you can't apply a full reset to form elements yeah. You could always fake the background by having an element beneath the