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

Important Update:

As of Firefox V35 the appearance property now works !!

From firefox's official release notes on V35:

Using -moz-appearance with the none value on a combobox now remove the dropdown button (bug 649849).

So now in order to hide the default arrow - it's as easy as adding the following rules on our select element:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Answer 2

try this css

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Its working

Answer 3

Try this way:

-webkit-appearance: button;
-moz-appearance: button;

Then, you can use a different image as background and place it:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

There is another way for moz browsers:

text-indent:10px;

If you have a defined a width to you select, this property will push the default dropbox button under the select area.

It works for me! ;)

Answer 4

The appearance property from CSS3 does not allow none value. Take a look at the W3C reference. So, what you is trying to do isn't valid (indeed Chrome shouldn't accept too).

Then unfortunatelly we really don't have any cross-browser solution to hide that arrow using pure CSS. As pointed, you will need JavaScript.

I suggest you to consider using selectBox jQuery plugin. It's very lightweight and nicely done.

Answer 5

You could increase the width of the box and move the arrow closer to the left of the arrow. this then allows you to cover the arrow with an empty white div.

Have a look: http://jsbin.com/aniyu4/86/edit

Answer 6

Or, you can clip the select. Something along the lines of:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

This should clip 30px of the right side of select box, stripping away the arrow. Now supply a 170px background image and voila, styled select