StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhat is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element
text
Body
copied!<p>I'm trying to style the dropdown arrow of a <code><select></code> element with CSS only , it works perfectly in Chrome/Safari:</p> <pre><code>select { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url('./select-arrow1.png') ; background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; margin: 0; padding-top: 2px; padding-bottom: 2px; width: 200px; } </code></pre> <p>Which renders beautifully <a href="https://i.imgur.com/bYl2X.jpg" rel="noreferrer">as seen here</a></p> <p>By that logic, the only thing I had to do to make it work in Firefox was to add all <code>-webkit-*</code> stuff as <code>-moz-*</code> :</p> <pre><code>-moz-appearance: button; -moz-border-radius: 2px; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-padding-end: 20px; -moz-padding-start: 2px; -moz-user-select: none; </code></pre> <p>It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image <a href="https://i.imgur.com/SQPXO.jpg" rel="noreferrer">as seen here</a></p> <p>It looks like <code>-moz-appearance: button;</code> does not work for a <code><select></code> element. Also <code>-moz-appearance: none;</code> has no effect to remove the default dropdown arrow.</p> <p>So what is the correct value for <code>-moz-appearance</code> to remove the default dropdown arrow? </p> <h1>Updates:</h1> <p><strong>December 11, 2014</strong>: <strong>Stop inventing new hacks</strong>. After 4 and a half years, <code>-moz-appearance:none</code> is starting to work since Firefox 35. Although <code>moz-appearance:button</code> is still broken, you don't need to use it anyway. <a href="http://jsfiddle.net/88rpe9ze/" rel="noreferrer">Here is a very basic working example.</a> </p> <p><strong>April 28, 2014</strong>: The mentioned <a href="//stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select#answer-18327666">css hack</a> worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload