Avatar for Username

Prohledat stránky podpory

Vyhněte se podvodům. Za účelem poskytnutí podpory vás nikdy nežádáme, abyste zavolali nebo poslali SMS na nějaké telefonní číslo nebo abyste sdělili své osobní údaje. Jakékoliv podezřelé chování nám prosím nahlaste pomocí odkazu „Nahlásit zneužití“.

Zjistit více

Toto vlákno bylo archivováno. Pokud potřebujete pomoci, založte prosím nový dotaz.

Hide a <select> arrow in Firefox 30

  • 4 odpovědi
  • 568 má tento problém
  • 30 zobrazení
  • Poslední odpověď od 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.

Zvolené řešení

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.

Přečíst dotaz v kontextu 👍 13

Všechny odpovědi (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 Autor dotazu
more options

Zvolené řešení

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

Upravil uživatel cor-el dne