How to remove the arrow from a select element in Firefox

Problem

I’m trying to use CSS3 to style a select element. In WebKit (Chrome / Safari), I’m receiving the results I want, but Firefox isn’t cooperating (I’m not even trying with IE). I’m using the CSS3 appearance property, but Firefox won’t let me get rid of the drop-down symbol.

Here’s an illustration of what I’m talking about: 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 attempting anything elaborate. I’d like to replace the default styles with my own drop-down arrow. As I already stated, amazing in WebKit, not so much in Firefox. The -moz-appearance: none command does not appear to remove the drop-down item.

Do you have any suggestions? JavaScript is not a viable option.

Asked by RussellUresti

Solution #1

This has been resolved in Firefox 35. Details can be found in the complete gist.

I recently discovered how to disable the select arrow in Firefox. Using a combination of -prefix-appearance, text-indent, and text-overflow is the key. It’s made entirely of CSS and doesn’t require any additional markup.

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

Firefox newest versions were tested on Windows 8, Ubuntu, and Mac.

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

More information on the subject can be found at https://gist.github.com/joaocunha/6273016.

Answered by João Cunha

Solution #2

Okay, I know this is an old question, but Mozilla has done nothing in the last two years.

I’ve devised a straightforward solution.

This essentially removes all of the formatting from the choose box in Firefox and surrounds it in a span element with your custom style, however it should only be used in Firefox.

Assume the following is your selection menu:

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

Assume the CSS class ‘css-select’ is as follows:

.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. This isn’t ideal.

To get this working in Firefox, place a span element with the class ‘css-select-moz’ around the page:

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

Then use -moz-appearance: hide-moz-dirty-arrow: hide-moz-dirty-arrow: hide-moz-dirty-arrow: hide-moz-dirt window and paste the custom arrow into the span’s class ‘css-select-moz’, but just for mozilla, as follows:

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

It’s very impressive considering I only discovered this bug 3 hours ago (I’m new to webdesign and fully self-taught). However, because this community has indirectly helped me so much, I figured it was about time I reciprocated.

Only versions 18 and 22 of Firefox (Mac) were used to test it (after I updated).

Any and all input is appreciated.

Answered by Jordan Young

Solution #3

The trick that I use is to make select width more than 100% and use overflow:hidden.

select {
    overflow:hidden;
    width: 120%;
}

This is the only way to hide the dropdown arrow in FF right now.

BTW, use http://harvesthq.github.com/chosen/ if you want nice dropdowns.

Answered by opengrid

Solution #4

According to the official release notes for Firefox V35,

Now all we have to do is add the following rules to our select element to conceal the default arrow:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

Answered by Danield

Solution #5

We’ve discovered a straightforward and reasonable solution. It’s cross-browser compatible, degradable, and doesn’t break form submissions. Set the opacity of the select box to 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

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

You can still click on it because of this.

Then, using the same dimensions as the choose box, create a div. As the background, the div should be placed beneath the select box. To accomplish this, use position: absolute and z-index.

.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>

Javascript is used to update the innerHTML of the div. jQuery makes it simple:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

That concludes our discussion. Instead of the pick box, style your div. Because I haven’t tested the given code, you’ll most likely need to make changes. But I think you get the idea.

This solution, in my opinion, outperforms -webkit-appearance: none;. Browsers should only control how form elements are interacted with, not how they are first shown on the page, because this undermines site architecture.

Answered by Shaun

Post is based on https://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-element-in-firefox