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

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