I’ve been battling this dropdown recently for Firefox and I’m desprately trying to find a solution to remove this default dropdown in Firefox so, I can use my custom arrow. It’s developed with foundation, so solutions with a static width/height, etc to hide it from the form doesn’t really work out in my case and I’m trying to avoid from JS plugins to depend on this form.
It’s even more of a bummer that I know a solution that should work, but Firefox hasn’t fixed this issue since early 2011 with the ‘-moz-apperance: none;’ as it doesn’t do anything which was supposed to work just like -webkit-apperance: none; which eliminates the default dropdown as intended.
@mottie Hey thanks!! Pretty helpful, as your second alternative actually worked out pretty well except obviously the text indent. Is there any way of ‘forcing’ the text back without the dropdown as well? Starting to look a lot better!
I’ve actually tried the third option before and seemed to not do the trick, however could’ve been my fault. I’m going to try that again as well!
Again, I appreciate for taking your time to review my markup like that and everything!