Styling an input type="file"

Reader Michael McGrady was kind enough to send me a way of styling an input type="file", something that came in very handily in a project I was working on.

After tweaking it a bit I succesfully implemented his idea, and I describe the result on the new Styling an input type="file". Although the technique can be largely, but not entirely, implemented in pure CSS, I nonetheless prefer a JavaScript solution for reasons explained on the page.

Comments

1 Posted by rohan on 14 January 2005 | Permalink

as described , when Adding input file controls dynamically .
the file is not available in the form file collection after submit ????

2 Posted by bernard on 26 January 2005 | Permalink

With this solution, user cannot copy & paste the filename directly onto the text box field - which is something I (personally) do often.

3 Posted by lou on 24 February 2005 | Permalink

how do you display a server side generated value on the fake input field?

4 Posted by David P. Hochman on 9 March 2005 | Permalink

Unfortunately, we can't style the font family of a real file input in Firefox or Mozilla, which use the font "Microsoft Sans Serif" and don't have a configurable setting for it. If the font family and size of the fake file input do not match the real file input, the input elements won't line up and the visible button may be misaligned with the real Browse... button. This may be a problem if a style rule applies a font to all (*) or input elements.

Painfully, the answer is to apply the default font to both the real/opaque input file and the fake/visible input text.

1. Add this rule to input.file:

font-family: "Microsoft Sans Serif", sans-serif;

2. Add this class for fake input text elements,

.filefont {
font-family: "Microsoft Sans Serif", sans-serif;
}

3. To add class="filefont" to the fake input element, replace:

fakeFileUpload.appendChild(document.createElement('input'));

with:

var fakeInput=document.createElement('input');
fakeInput.className='filefont';
fakeFileUpload.appendChild(fakeInput);

5 Posted by Jon B on 27 July 2005 | Permalink

is it not possible to extend mozilla with XBL behaviours or something like that to make fileuploadfield.click() work?

obviously wouldn't work in opera or safari but we could a graceful degrade there no?

maybe i'm wrong tho, I don't quite get the XBL behaviour stuff yet.

6 Posted by Denis on 14 September 2005 | Permalink

I have struggled with the problem of renaming the "Browse..." button to its French equivalent which is, ironically, "Explorer..." This is a conundrum, but not being a French speaker, I'm not able to peruse French sites to see how they handle this. Any suggestions (or new revelations) are appreciated.

7 Posted by Roy Tang on 1 October 2005 | Permalink

The solution hinges upon placing the "fake" button in the same position as the "real" button. Doesn't it mean that the fake and real buttons must be the exact same size, so that all clicks on the fake button correctly affect the real button?

Won't it have a problem with different OSes w/c have different sizes for the "Browse..." button?

8 Posted by Cory Thompson on 13 October 2005 | Permalink

You can't highlight the text in the input field after it has been populated with the path to the file. This is the worst alternative to this problem yet.

9 Posted by Edward Kmett on 31 March 2006 | Permalink

It appears that Opera has made it so that if an element has opacity 0, then it doesn't receive events. Further limiting the usefulness of this effect.

10 Posted by Gordon Myers on 23 April 2006 | Permalink

This does not appear to work correctly at all on Internet Explorer 7. Just to let you know.