File uploads – a designer’s nightmare?

browser_icons_wide
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:
ff_original
IE 9.0:
ie_original
Chrome v30.0:
chrome_original

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):

FF:
ff_result
IE:
ie_result
Chrome:
chrome_result

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 **/
.file-input-wrapper
{
    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…”).

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s