How to Correctly Conceal the Select Dropdown Arrow in Firefox?

Correcting "-moz-appearance" for Select Dropdown Arrow Concealment

Problem:

You're attempting to customize a select element's dropdown arrow using CSS in both Chrome and Firefox. While your "-webkit-" syntax operates flawlessly in Chrome/Safari, its "-moz-" counterparts don't hide the dropdown arrow in Firefox. "-moz-appearance: none;" also fails to remove the default arrow.

Solution:

The correct "-moz-appearance" value to eliminate the dropdown arrow is "-moz-appearance: none;." However, this property, along with "-moz-appearance: button;" is now legacy content. Firefox v35 onwards supports the improved "appearance" property, enabling a simpler solution:

<code class="css">select {
  appearance: none;
}</code>

Alternative Hack (Pre-Firefox v35):

Before Firefox v35, a CSS hack was necessary to hide the arrow:

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

This method shifts the arrow slightly to the right, causing the overflow to eliminate it.

Updates:

• December 11, 2014: "-moz-appearance:none" is now supported in Firefox v35.
• April 28, 2014: The hack mentioned above temporarily malfunctioned in Firefox 31.0.a1 Nightly; however, the issue has been resolved.

The above is the detailed content of How to Correctly Conceal the Select Dropdown Arrow in Firefox?. For more information, please follow other related articles on the PHP Chinese website!