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

Hiding Dropdown Arrow of Element in Firefox

Problem:

Modifying the style of a

element's dropdown arrow works seamlessly in Chrome and Safari using "-webkit-appearance: button;". However, Firefox retains the default arrow when this property is applied.

Solution:

To hide the dropdown arrow in Firefox, utilize a combination of the following CSS properties:

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

Explanation:

"-moz-appearance: none;" removes the default Firefox appearance. "text-indent: 0.01px;" pushes the arrow slightly to the right, while "text-overflow: '';" hides the overflowing portion, including the arrow.

Update (December 2014):

Firefox 35 and later natively support "-moz-appearance: none;" for elements, eliminating the need for additional hacks.

Update (April 2014):

While the mentioned CSS hack initially worked, a bug re-emerged in Firefox 31.0.a1 Nightly, affecting all platforms. However, as of Firefox 35, this bug has been resolved.

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

firefox css chrome safari webkit for while select using Property default this overflow bug

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why does my bottom padding disappear in Firefox when using overflow: scroll?Next article：Why does my bottom padding disappear in Firefox when using overflow: scroll?

Related articles

See more

• How can version numbers in CSS filenames improve website performance?
• How to Center an Unordered List of Unknown Width in CSS?
• Why Do My CSS Transitions Flash on Page Load in Chrome?
• Why Does My Flex Child Not Fill the Container Height?
• How to Create a Centered Heading with Horizontal Lines That Disappear When Crossing Text?

• Home

• Course

• Q&A

• My

• Home
• Course
• Article
• Q&A
• Dictionary
• Manual
• Download
• Topic

Home

Article

Q&A

Course

Topic

Download

Game

Dictionary

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）