How to Hide the Dropdown Arrow in

Elements in Firefox? " />

How to Remove the Dropdown Arrow in Elements Using CSS in Firefox

Despite Chrome and Safari successfully hiding the dropdown arrow with -webkit-appearance: button;, Firefox presents a challenge due to its differing implementation of the -moz-appearance property.

The Problem: Persistent Default Arrow

When applying -moz-appearance: button; to

elements, the default dropdown arrow persists and overlays the background image. This is because -moz-appearance: button; is not supported for elements in Firefox. Additionally, -moz-appearance: none; has no effect on the arrow.

The Solution: A CSS Hack

To hide the dropdown arrow in Firefox, a combination of CSS properties is necessary:

<code class="css">select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}</code>

By setting -moz-appearance to none and adding a minuscule text-indent of 0.01px, the arrow is pushed out of view. text-overflow: '' removes any remaining overflow text, ensuring the arrow stays hidden.

Updates:

December 11, 2014: -moz-appearance: none; now functions as expected in Firefox 35, eliminating the need for hacks.
April 28, 2014: The aforementioned CSS hack had temporary effectiveness but has since resurfaced in Firefox 31.0.a1 Nightly on multiple platforms.

The above is the detailed content of How to Hide the Dropdown Arrow in

Elements in Firefox?. For more information, please follow other related articles on the PHP Chinese website!