How to remove arrow on selectbox (Firefox)

Question

I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:

background:transparent;
content:'';
apperiance:none;

Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?

-moz-appearance:none; and here is full answer to your question http://stackoverflow.com/questions/5748351/webkit-appearance-none-firefox-equivalent — Kyslik, May 29 '13 at 08:42

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.

.poa-select {
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
}
.poa-select::-ms-expand {
  display: none;
}

Ideas taken from here and here.

edited May 23 '17 at 11:50

Community

1
1

answered Oct 15 '13 at 03:25

embden

161
9

score 0 · Answer 2 · answered May 29 '13 at 08:49

Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!

If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.

Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

The trick that works for me is to make select width more than 100% and apply overflow:hidden

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

The answer from here : How to remove the arrow from a tag in Firefox

edited May 23 '17 at 11:43

Community

1
1

answered May 29 '13 at 08:53

Mina Atia

780
1
4
13

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

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.

edited May 23 '17 at 11:43

Community

1
1

answered May 29 '13 at 09:08

Danield

121,619
37
226
255

In the fiddle I have **replaced** the default arrow with a custom arrow - you could use the same method to remove the arrow by replacing my custom arrow with a white background (say) – Danield Aug 28 '13 at 09:54

How to remove arrow on selectbox (Firefox)

4 Answers4