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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

Hide a <select> arrow in Firefox 30

  • 4 fhreagra
  • 568 leis an bhfadhb seo
  • 39 views
  • Freagra is déanaí ó Bharathiraj

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.

Réiteach roghnaithe

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)

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.

more options

Réiteach Roghnaithe

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.

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!

more options

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

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

Athraithe ag cor-el ar