CSS: Styling File Upload / Select Input Control <input type="file" … />

by Yang Yang on February 8, 2009

Let’s face it, the native implementations of file uploading control of HTML form is ugly, throughout most of the browsers, and not consistent at all. Plus, <input type=”file” … /> just doesn’t play by quite a few of the CSS input styling rules such as border and background, making it a even bigger challenge.

Now how do we bend this rigid boy to our visual pleasure?

A few examples

  1. a contact form
  2. a file upload form

I’m not saying those are beautiful just when they come down to this technique I’m going to tell you, it’s absolutely possible to style an incredible control out of the native select and upload file input element.

The solution

The solution is to make use of the CSS opacity rule to give total transparency to the file upload control while maintaining it’s functionality, placing fake controls (a text field and a fake image button) between them and the visitor.

The HTML
<li class="upload">
	<label for="realupload">Upload Image: </label>
	<div class="fakeupload">
		<input type="text" name="fakeupload" /> <!-- browse button is here as background -->
	</div>
	<input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" />
</li>
The CSS
.upload {
	position:relative;
	width:664px;
}
.realupload {
	position:absolute;
	top:0;
	right:0;

	/* start of transparency styles */
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity:0);
	/* end of transparency styles */

	z-index:2; /* bring the real upload interactivity up front */
	width:270px;
}
form .fakeupload {
	background:url(browse.gif) no-repeat 100% 50%;
}
form .fakeupload input {
	width:401px;
}

All css width properties have to be decided upon your actual situation, as the native appearance of all upload controls vary browser by browser, you will adjust all of the width for the best compatibility and functionality.

There’s also a small line of javascript that simulates the function of real upload control on the fake one:

this.form.fakeupload.value = this.value;

To make it look real!

Subscribe to Kavoir: blog feed

You should also read:

Fird December 2, 2009 at 4:46 pm

Hey thanks for this tip! I almost gave up on styling the input box.

Tom November 21, 2010 at 8:03 am

This is great. No Flash, no ugly input!

M December 2, 2010 at 7:31 am

Very sneaky… I love it!

biraj December 7, 2010 at 8:50 pm

this is not working in firefox??

Yang Yang March 22, 2011 at 10:17 am

I tried the examples in a Chrome and Firefox and both worked. Mind to check again?

jay January 18, 2011 at 3:39 am

Thanx for this tip man…really preciate it.

yacine January 23, 2011 at 10:45 pm

nice!

cretz April 25, 2011 at 5:08 pm

thanks man, saved me a lot trouble

Hannes April 27, 2011 at 2:57 pm

Thanks, included this to style the fileupload within a form generated by the Wordpress-plugin Contact-Form 7. Looks really nice.

nmk May 5, 2011 at 7:58 pm

Hi, I’ve a problem with this solution. Realupload input dosen’t pass the proper value to the fakeuploade input (problem with script?). Have any1 got similar problems? Everything is the same as on preview and samples… dunno what is going on:/
(www.airsystem.org.pl/site/rekuperacja.html – one the left side u have mail form, last 3 input fields are file inputs)

Lukasz O. June 17, 2011 at 11:55 pm

Hey!
Thanks… Working nice but not in IE
You have to click 2times to open file upload window
It is because IE normaly doesnt open fileupload on textfield-focus
button(original not fake) – just click once
text-field next to Browse button -1 click=focus ….doubleClick = open
tested(IE 7, 8, 9)

Any idea hov to make it open on click not double click in IE ?

Designer July 22, 2011 at 1:34 am

hmz….
is not working for me (Firefox)

Jacob September 9, 2011 at 5:04 am

I’m getting “C:\fakepath” in the input field in Chrome, not exactly sure why. Is there any way to fix this?

Matt September 30, 2012 at 2:58 am

Same thing for me… (a year later..)
Where does the text “C:\fakepath\” come from and how do I change it or delete it?

Thanks!

Jojo October 31, 2011 at 3:11 am

Thanks for finding a solution by using just a minimum of javascript!
Is there any chance to avoid the cursor being changed on hover? I would like to have a “cursor=pointer”-like javascript solution… :D

Kursad February 22, 2012 at 9:31 pm

Thamks.

sp March 27, 2012 at 2:02 pm

nice

sowmya July 11, 2012 at 6:46 pm

nice Code:)

Adam August 1, 2012 at 4:21 am

Doesn’t work for me either in Firefox

Rubi86 October 10, 2012 at 6:31 am

Thank you very much, It really works

Comments on this entry are closed.

{ 5 trackbacks }

Previous post:

Next post: