Hide a <select> arrow in Firefox 30
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.
선택된 해결법
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.
문맥에 따라 이 답변을 읽어주세요 👍 13모든 댓글 (4)
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.
선택된 해결법
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.
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!
If you really wanna hide the dropdown arrow you can use this
#dropdown
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
글쓴이 cor-el 수정일시