How to style a file input element in Firefox

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

Conditional CSS for Firefox/Gecko browsers

Last year I posted how to add conditional comments for webkit-based browsers. This time I found a really cool hack on how to do the very same thing for Firefox/Gecko-based browsers (from Chris Coyier). The solution is again very simple and it’s based on a media query that only Firefox/Gecko-based browsers will parse.

See the Pen Conditional CSS for Firefox/Gecko browsers by John Tsevdos (@tsevdos) on CodePen