File uploads – a designer’s nightmare?

Just a short post here about styling file upload form fields.
It’s been said a thousand times before on the net, and the more it’s mentioned in blog posts, the easier you’ll find your solution. So here goes.

Modern browsers show file input (upload) elements in a very disturbing different way:
FF 24.0:
IE 9.0:
Chrome v30.0:

Not exactly uniform, right?
Thanks to Ian Hansen’s blog post I was able to get a very uniform result which still worked perfectly, using only CSS, a parent container and a replacement button (the button is styled using jQuery UI):


How to accomplish it?
Simple, just add a button next to your <input type="file"> element, and place both in a container element. Then apply the following styles:

/** Slightly tweaked as compared to the example from Ian **/
    width: 100px;
    overflow: hidden;
    position: relative;

.file-input-wrapper > input[type="file"]
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;

.file-input-wrapper > input[type="button"]
    display: inline-block;
    width: 100px;

Above all the CSS greatness and the great and uniform looks, you can now also specify the label for the Browse button (we use “Browse…”).


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s