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 HamiltonOriginal
- 2024-10-31 08:59:30217browse
How to Hide the Dropdown Arrow of a
The CSS property -moz-appearance is commonly used to customize the appearance of a
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>
How it works:
- By setting -moz-appearance: none;, regular browser styling for the
- text-indent: 0.01px; pushes the text slightly to the right.
- text-overflow: ''; causes any overflowing text to be hidden, including the dropdown arrow.
Note:
This hack may no longer be necessary in the latest versions of Firefox, where -moz-appearance: none; now works as expected. Refer to the provided gist for updated information and cross-browser compatibility.
The above is the detailed content of How to Hide the Dropdown Arrow of a `` Element in Firefox?. For more information, please follow other related articles on the PHP Chinese website!