Avatar for Username

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

Hide a <select> arrow in Firefox 30

  • 4 antwurd
  • 568 hawwe dit probleem
  • 1 werjefte
  • Lêste antwurd fan 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.

Keazen oplossing

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.

Dit antwurd yn kontekst lêze 👍 13

Alle antwurden (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 Fraacheigener
more options

Keazen oplossing

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;
}

Bewurke troch cor-el op