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](http://www.quirksmode.org/dom/inputfile.html “Styling an input type=“file""), 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).
<label>
<input type="file" />
</label>
label {
display: block;
width: 100px;
height: 20px;
background: url(../images/icons/file_input_background.png) 0 0 no-repeat;
cursor: pointer;
border: 1px solid #000; /* Just for viewinf the box. Remove it after you apply your own background image */
}
label input {
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
cursor: pointer;
}