How do you style file input elements?

[hairtransplant]

The HTML/CSS structure

I've decided on the following HTML/CSS approach:

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>

The surrounding <div class="fileinputs"> is positioned relatively so that we can create an absolutely positioned layer inside it: the fake file input.

The <div class="fakefile">, containing the fake input and the button, is positioned absolutely and has a z-index of 1, so that it appears underneath the real file input.

The real file input field also gets position: relative to be able to assign it a z-index. After all, the real field should be on top of the fake field. Then we set the opacity of the real file input field to 0, making it effectively invisible.