This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

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
  • 1 view
  • Last reply by Bharathiraj

Blaise
Blaise
more options

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
more options

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
more options

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
more options

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
more options

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