File input fields are a pain for CSS-reliant designers. They can't be styled the way most everything else can. On top of that, the "Browse" button is actually part of the form element. If you're trying to give your form a different look, this can be a real pain.
There's a way around it, and while it's not exactly clean, it lets you use the style you want and it retains the form's functionality across browsers. The basic idea is to hide the actual input element behind a fake, nicer-looking one.
First, the CSS:
div.filerow {
width: 250px; /* Feel free to change the dimensions, */
height: 40px; /* but you'll want to make them fixed */
position: relative;
background-image: url('button_browse.png');
background-repeat: no-repeat;
background-position: right center;
display: block;
overflow: hidden;
}
div.fakefile {
/* This should be styled like your form */
width: 165px; /* You may need to change this */
height: 15px;
padding: 1px;
position: absolute;
left: 0px;
overflow: hidden;
}
input.file {
position: relative;
height: 100%;
width: 230px;
top: -4px;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index: 2;
}Some explanation: We actually need the field to be above the fake field (so that clicking in that area focuses it), so we give it a higher z-index but make it transparent. The file field doesn't work with percentage widths (surprise!), so you'll need to manually set the width to be a little smaller than the actual field. (The width style is completely ignored by Firefox, which we'll address below.) Height works as a percentage in IE and FF – go figure – and we want it to be as big as possible. When working with the dimensions, it can be helpful to make the field opaque so that you can see how it lines up.
The "Browse" button becomes a background image. You may need to adjust its position, depending on what image you're using. Note that IE doesn't automatically activate the field when you click on the text area, so using a Browse image is highly recommended.
Onto the HTML:
<div class="filerow fileinputs">
<div class="fakefile" id="fakefile"></div>
<input type="file" class="file" size="50" name="myFile"
tabindex="32767"
onchange="document.getElementById('fakeformElement').innerHTML = this.value"
onfocus="this.blur()">
</div>A few things to note: first, we always blur the field. This prevents the focus from being set on a field the user can't see. Second, we set the tabindex arbitrarily high to allow the user to navigate the form normally with tab. Finally, we stuff the value of the real field into the fake one to make it look like it's real.
Finally, as mentioned, CSS width is ignored on the file element, so we use size instead. Don't worry about getting this right, since IE ignores it and FF doesn't care where on the field you click. An arbitrarily high value will work. This is why we set overflow:hidden.
Et voila, you have a styled file input field. Overly complicated? Yes. But until CSS lets you style the file field (and for a good while after, if you care about compatibility), this is what you've got.
Here's a live example:
