What Is the Correct "-Moz-Appearance" Value to Hide Dropdown Arrow of a <Select> Element

What is the correct -moz-appearance value to hide dropdown arrow of a select element

This is it guys! FIXED!

Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

or workaround

For those wondering:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.

Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.

Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)

Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!

How to remove the arrow from a select element in Firefox

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

I've come up with a simple workaround.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

Say this is your select menu:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

And lets assume the css class 'css-select' is:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

All feedback is welcome.

How to remove the default arrow icon from a dropdown list (select element)?

If you use TailwindCSS
You may take advantage of the appearance-none class.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

How to remove arrow from select element

1) Add a pseudo element for your custom arrow icon and position it to the right of the select element such that it overlays the default arrow.

2) Set pointer-events: none; on the pseudo element so that clicking on it doesn't hamper the drop down from opening.

DEMO

.select-style:after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px;
    background-size: 26px 26px;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none; /* <-- */
}

.select-style {  border: 1px solid #333;  width: auto;  height: 32px;  overflow: hidden;  position: relative;  margin: 40px;}.select-style:after {  content: '';  display: inline-block;  width: 30px;  height: 30px;  background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px;  background-size: 26px 26px;  position: absolute;  right: 0;  top: 0;  pointer-events: none;}.select-style select {  padding: 9px 8px 0 5px;  width: 100%;  border: none;  font-size: 14px;}

<div class="select-style">
  <select>    <option value="volvo">Please select an option</option>    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="mercedes">Mercedes</option>    <option value="audi">Audi</option>  </select>

select::-ms-expand {
    display: none;
}

-webkit-appearance:none;

.reset {  -webkit-appearance: none;   -moz-appearance:none;  appearance:none;}.select {  -webkit-appearance: menulist;  -moz-appearance: menulist;   appearance: menulist; }

<select class="reset select"></select>

<select> <optgroup label="Level One">  <option> A.1 </option>  <optgroup label="    Level Two">   <option>     A.B.1 </option>  </optgroup>  <option> A.2 </option> </optgroup></select>