How to Hide the Dropdown Arrow of `` Element in Firefox?-CSS Tutorial-php.cn

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

Hiding Dropdown Arrow of 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>

Copy after login

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