How to remove the arrow from a select element in F

Question

I'm trying to style a select element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance property, but for some reason I can't shake the drop-down icon out of Firefox.

Here's an example of what I'm doing: 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 trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: none doesn't get rid of the drop-down item.

Any ideas? No, JavaScript is not an option

Answer 1

Update: this was fixed in Firefox v35. See the full gist for details.

---

Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.

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

Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.

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

More on the subject: https://gist.github.com/joaocunha/6273016

Answer 2

building on the answer by @JoãoCunha, one css style that is usefull for more then one browser

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

Answer 3

I am styling the select just likes this

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

It works for me in FF, Safari and Chrome in all versions I've tested.

In IE I put:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Also you can: .yourclass::-ms-expand {display: none; } .yourid::-ms-exapan {display: none; }

Answer 4

We've found a simple and decent way to do this. It's cross-browser,degradable, and doesn't break a form post. First set the select box's opacity to 0.

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

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

this is so you can still click on it

Then make div with the same dimensions as the select box. The div should lay under the select box as the background. Use { position: absolute } and z-index to achieve this.

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

Update the div's innerHTML with javascript. Easypeasy with jQuery:

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

That's it! Just style your div instead of the select box. I haven't tested the above code so you'll probably need tweak it. But hopefully you get the gist.

I think this solution beats {-webkit-appearance: none;}. What browsers should do at the very most is dictate interaction with form elements, but definitely not how their initially displayed on the page as that breaks site design.

Answer 5

A useful hack for me is to set the (selects) display to inline-flex. Cuts the arrow right out of my select button. Without all of the added code.

• For Fx only. -webkit appearance still needed for Chrome, etc...

Answer 6

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

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

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

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