简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

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

Linda Hamilton
Release： 2024-10-31 08:59:30
Original
105 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