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

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!

25 comments

  1. Fird

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

  2. Tom

    This is great. No Flash, no ugly input!

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

  4. M

    Very sneaky… I love it!

  5. biraj

    this is not working in firefox??

    • Yang Yang

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

  6. jay

    Thanx for this tip man…really preciate it.

  7. yacine

    nice!

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

  9. cretz

    thanks man, saved me a lot trouble

  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 ?

  13. Designer

    hmz….
    is not working for me (Firefox)

  14. Jacob

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

    • 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

  17. sp

    nice

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

  19. sowmya

    nice Code:)

  20. Adam

    Doesn’t work for me either in Firefox

  21. Rubi86

    Thank you very much, It really works

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

Leave a Reply

Your email address will not be published.

*