Mozilla will shut down Pocket’s services on July 8, 2025. At that time users will no longer be able to access the Pocket website, apps and API. You can export your saved items and API data until October 8, 2025 before they are permanently removed. For more information, see this article.

Avatar for Username

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Hide a <select> arrow in Firefox 30

  • 4 replies
  • 568 have this problem
  • 43 views
  • Last reply by Bharathiraj

Blaise
Blaise

Is there a way to hide the arrow of a <select> element in Firefox 30 using CSS?

Maybe there's a hidden (pseudo) element or property I can access?

I couldn't find anything on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions. I tried a couple of -moz-appearance values, but they either add styling I cannot remove, or they do not allow restyling, or they still show the arrow.

In Firefox 29, there was a hack that worked, described here: https://gist.github.com/joaocunha/6273016 it no longer works in Firefox 30. There is also a bug about the unstylability of select elements here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849. If anyone can point me to a changeset that might have changed this in Firefox 30, I'm also interested. I know I can hide the arrow by overlaying an element, or by nesting the select and hiding the overflow, I’m not really interested in that.

Is there a way to hide the arrow of a <select> element in Firefox 30 using CSS? Maybe there's a hidden (pseudo) element or property I can access? I couldn't find anything on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions. I tried a couple of -moz-appearance values, but they either add styling I cannot remove, or they do not allow restyling, or they still show the arrow. In Firefox 29, there was a hack that worked, described here: https://gist.github.com/joaocunha/6273016 it no longer works in Firefox 30. There is also a bug about the unstylability of select elements here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849. If anyone can point me to a changeset that might have changed this in Firefox 30, I'm also interested. I know I can hide the arrow by overlaying an element, or by nesting the select and hiding the overflow, I’m not really interested in that.

Chosen solution

A lot of -moz-appearance's work, but unfortunately not in combination with a border or background.

I cannot change the markup in all places because I would break existing other widgets, so for now Firefox users get a slightly uglier dropdown.

Read this answer in context 👍 13

All Replies (4)

Kohei
Kohei

I left a comment in the bug. -moz-appearance:treeitem works for me, but if you really want to style the <select> element, you may want to create a custom widget yourself.

Blaise
Blaise Question owner

Chosen Solution

A lot of -moz-appearance's work, but unfortunately not in combination with a border or background.

I cannot change the markup in all places because I would break existing other widgets, so for now Firefox users get a slightly uglier dropdown.

Currelis
Currelis

I encountered this issue when I received a message from my client saying his select element arrows were messed up in firefox 30.

What I can already tell you is that none of the old CSS hacks work anymore.

There are a few alternative CSS solutions, I wrote a blog post about this to inform people, makes it a bit easier too as it's more detailed than a forum post.

http://www.currelis.com/firefox-30-0-select-arrow-css-longer-works.html

Good luck!

Bharathiraj
Bharathiraj

If you really wanna hide the dropdown arrow you can use this 

#dropdown 
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Modified by cor-el