Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > How to Hide the Dropdown Arrow of a `` Element in Firefox?

How to Hide the Dropdown Arrow of a `` Element in Firefox?

Linda Hamilton
Release： 2024-10-31 08:59:30
Original
222 people have browsed it

How to Hide the Dropdown Arrow of a `` Element in Firefox?

How to Hide the Dropdown Arrow of a element, including hiding its dropdown arrow. However, older versions of Firefox may not respond correctly to this property.

Firefox compatibility issues:

Initially, using -moz-appearance: none; alone was insufficient to remove the dropdown arrow in Firefox. This issue has since been resolved in Firefox version 35.

Solution:

For older versions of Firefox, a combination of -moz-appearance, text-indent, and text-overflow can be employed to hide the arrow:

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

How it works:

  • By setting -moz-appearance: none;, regular browser styling for the