Hiding default select arrow in Firefox 22

Question

Following this answer https://stackoverflow.com/a/17713753/407943

I've tried implementing the same solution but it does not work on my Windows 7 Firefox 22, this is what I get:

enter image description here

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

EDIT: here's a jsfiddle http://jsfiddle.net/TGBEZ/1/

I think you will have to go for a javascript solution... – Brewal Jul 22 '13 at 09:01 — Brewal, Jul 22 '13 at 09:01
@Brewal can you elaborate? – Or Weinberger Jul 22 '13 at 09:10 — Or Weinberger, Jul 22 '13 at 09:10

João Cunha · Answer 1 · 2014-08-03T14:25:13.207

33

Update: this trick stopped working as of FF 30. No other fix so far. Keep your eyes on the full gist for updates.

How to remove the <select> arrow on Firefox:

-moz-appearance:none; doesn't work by itself. You need to add some text-indent and text-overflow. Like this:

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

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

Learn the details on this gist: https://gist.github.com/joaocunha/6273016

edited Aug 03 '14 at 14:25

answered Aug 24 '13 at 11:55

João Cunha

3,776
3
22
33

4

This man needs a medal and this answer 500 upvotes. Only working solution I found on the internet in over an hour. – Niels Keurentjes Sep 19 '13 at 21:51
But it doesn't work in FF on Android. Use text-indent: 5px to fix it – EAndreyF Mar 11 '14 at 05:48
@EAndreyF: "Firefox for Android needs the whole width of the arrow as text-indent. It means you need to set it to at least 5px, but take care since Firefox seems to double the text-indent value on – João Cunha Mar 11 '14 at 06:13
2

sorry to say but its not hide in my firefox version 30.0. please let me know any solution if you have ? – Sandy Jul 04 '14 at 08:51

Brewal · Answer 2 · 2013-07-22T09:58:42.957

This is a known bug of firefox which won't be corrected soon, or maybe even later (see this bugzilla).

There is a pure CSS/HTML workaround :

HTML :

<div class="styled">
    <select></select>
</div>

CSS :

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

The Fiddle

The problem here is that you will have to make sure the text won't be too large, otherwise it will get over the image.

Also, there are javascript solutions. Take a look at customselect, a jQuery plugin to easily create your own selects.

Another famous plugin : chosen

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

This is the only solution that really worked for me on FF/IE/Chrome:

Customized select dropdown arrow not clickable

edited May 23 '17 at 12:29

Community

1
1

answered Jul 23 '13 at 13:45

Or Weinberger

7,332
23
71
116

score 0 · Answer 4 · answered Jul 01 '14 at 15:44

0

Using -moz-appearance: window instead of none seems to be working now in FF 30

answered Jul 01 '14 at 15:44

Fyb3roptik

57
6

score 0 · Answer 5 · answered Apr 22 '15 at 11:48

0

I have this working in Firefox 30+ with:

-moz-appearance: textfield;

answered Apr 22 '15 at 11:48

Adam Prendergast

1

Hiding default select arrow in Firefox 22

5 Answers5