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

25 Comments / CSS & HTML Tips, Web Design Tips and Insights / By /

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!

Related Posts

25 thoughts on “CSS: Styling File Upload / Select Input Control <input type="file" … />”

  3. Pingback: "Fakepath" nach input-styling - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

  8. Pingback: the rasx() context » Blog Archive » jQuery Unknowns of the First Half of 2011

  10. Hannes

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

  11. nmk

    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)

  12. Lukasz O.

    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 ?

  14. Jacob

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

    1. Matt

      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!

  15. Jojo

    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… 😀

  16. Pingback: CSS: Difference between opacity:0, visibility:hidden and display:none

  19. Pingback: CSS: Styling File Upload / Select Input Control <input type="file" … /> » Web Design

  23. Pingback: CSS: Styling File Upload / Select Input Control » imLuxin

Comments are closed.

Scroll to Top