Any advice on removing dropdown in CSS for Firefox? [URL Included] This topic is empty. Viewing 5 posts - 1 through 5 (of 5 total) #43314 DoPeTParticipant Hey there guys, 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. Here is the test site, I’m working with: http://bit.ly/YoqW8r Much appreciated everyone! #127878 MottieMember Hi DoPeT! Try either of these solutions (from [this StackOverflow answer](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox)); but first you’ll need to wrap the narrower selects inside of a “fivesix” element instead of applying that class directly to the select: .eight, .fivesix { overflow: hidden; } select { width: 120%; background: url(“../images/select.png”) no-repeat scroll 90% center #F2F2F2; } Alternatively, you could use text-indent to push the arrow out of view… and push your text to the right as well: .eight, .fivesix { overflow: hidden; } select { text-indent: 50px; /* you’ll need 50px in your case */ } #127887 MottieMember Another option is to wrap the select in a div and style that instead of the select, as this tutorial demonstrates: http://bavotasan.com/2011/style-select-box-using-only-css/ #127990 DoPeTParticipant @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! #128221 DoPeTParticipant If anyone has any suggestions to help improve this, would be very appreciated! Author Posts Viewing 5 posts - 1 through 5 (of 5 total) The forum ‘CSS’ is closed to new topics and replies. CSS-Tricks is powered by DigitalOcean. Keep up to date on web dev with our hand-crafted newsletter DigitalOcean DigitalOcean DigitalOcean Community About DigitalOcean Legal Free Credit Offer CSS-Tricks Email Guest Writing Book Advertising Follow Mastodon Twitter Instagram YouTube CodePen iTunes RSS Back to Top

[DoPeT]

Hey there guys,

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.

Here is the test site, I’m working with: http://bit.ly/YoqW8r

Much appreciated everyone!

[Mottie]

Hi DoPeT!

Try either of these solutions (from [this StackOverflow answer](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox)); but first you’ll need to wrap the narrower selects inside of a “fivesix” element instead of applying that class directly to the select:

.eight, .fivesix {
overflow: hidden;
}
select {
width: 120%;
background: url(“../images/select.png”) no-repeat scroll 90% center #F2F2F2;
}

Alternatively, you could use text-indent to push the arrow out of view… and push your text to the right as well:

.eight, .fivesix {
overflow: hidden;
}
select {
text-indent: 50px; /* you’ll need 50px in your case */
}

[Mottie]

Another option is to wrap the select in a div and style that instead of the select, as this tutorial demonstrates: http://bavotasan.com/2011/style-select-box-using-only-css/

[DoPeT]

@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!

[DoPeT]

If anyone has any suggestions to help improve this, would be very appreciated!

[Author]

Posts