How can I hide a <select> arrow in Firefox 30+? - css

Question

This hack used to work in <= Firefox 29 to remove a <select> arrow:
text-overflow: '';
text-indent: 0.01px;
-moz-appearance: none;
It no longer works in Firefox 30. Arrow is back.
Codepen for hack that works in Firefox 29
Related bug (now fixed in Fx 35b)
Does anyone know a way to achieve the same effect?
Note1: I'm not interested in solutions that overlay the arrow with another element, or solutions that nest the select element and do a overflow:hidden.
Note2: I tried all -moz-appearance possibilities. They either add default styling I cannot override, don't allow custom styling (border and background, specifically), or the arrow is still visible.
Update: it works again in Firefox 35 (currently in beta) using -moz-appearance: none, making this look consistent in all latest browsers (Tested in IE11, Firefox 35b, Chrome 39, Safari 8): http://jsfiddle.net/phd5pu9x/

Answer 1

I fixed my this issue by giving some style to div and select individually.
Anyone can change his width and other style properties a/c to needs. :)
Here is the js fiddle for it. JSFIDDLE
<div class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
<option>
apple
</option>
<option>
blackberry
</option>
<option>
pumpkin
</option>
</select>
.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden;
width: 220px; }
.common-dropdown-project-select{
width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;
background-repeat: no-repeat;
background-size: 25px 16px;
border: none ! important;
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }
select::-ms-expand {
display: none;}

Answer 2

Put the select in another container which has overflow: hidden;, make the select wider than the container. If you want a border, add it to the container.
An example is the select at the bottom of this page:
https://mozillians.org/en-US/

Answer 3

You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.
here is a jsbin example http://jsbin.com/pozomu/4/edit

Answer 4

/* For mozilla Firefox 30.0+ I used the following to coverup the reappearing arrow: */
#-moz-document url-prefix() {
.yourClass:after {
position: absolute;
margin-left: -25px;
border-radius: 4px;
content: url('../images/pathToYourDownArrowImage.svg');
pointer-events: none;
overflow: hidden;
}
/* I still use this to move the text over */
.yourClass select {
text-overflow: '';
text-indent: -1px;
-moz-appearance: none;
background: none;
}
}

Answer 5

Firefox > 29 -moz-appearance:none; working, But have a problem with width, we extend the width of select from 100 to 110% to hide, but it affects the design of a forms, So i just hide it with a div and over come it,
Check the codepen version
http://codepen.io/ssbalakumar/pen/jgLEq

Answer 6

As #mircea c alluded to ...
If your HTML looks like this:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
</div>
Then you can remove the dropdown arrow in Firefox 30+
.styled-select {
overflow: hidden;
width: 200px;
}
#-moz-document url-prefix(){
.styled-select select { width: 110%; }
}
Working demo: codepen
FYI: The same technique works in IE 8 & 9, just use a conditional comment instead of #-moz-document url-prefix()