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
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 replies on “CSS: Styling File Upload / Select Input Control <input type="file" … />”
Hey thanks for this tip! I almost gave up on styling the input box.
This is great. No Flash, no ugly input!
[…] nach input-styling Hallo, ich habe folgenden "Trick" angewendet: CSS: Styling File Upload / Select Input Control <input type="file" … /> Beispiel: Artikito.de @ Mein Profil bearbeiten Bisher habe ich es getestet im IE, FF und im […]
Very sneaky… I love it!
this is not working in firefox??
I tried the examples in a Chrome and Firefox and both worked. Mind to check again?
Thanx for this tip man…really preciate it.
nice!
[…] say, flickr.com took exceedingly tedious steps to make file upload sexy—with much success.) In “CSS: Styling File Upload / Select Input Control <input type=”file” … />,†the situation is made […]
thanks man, saved me a lot trouble
Thanks, included this to style the fileupload within a form generated by the WordPress-plugin Contact-Form 7. Looks really nice.
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)
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 ?
hmz….
is not working for me (Firefox)
I’m getting “C:\fakepath” in the input field in Chrome, not exactly sure why. Is there any way to fix this?
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!
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… 😀
[…] of the frequent uses of opacity is to style the HTML file upload control. And, opacity is the only CSS rule to make elements semi-transparent or […]
Thamks.
nice
[…] CSS: Styling File Upload / Select Input Control <input type="file" … /> […]
nice Code:)
Doesn’t work for me either in Firefox
Thank you very much, It really works
[…] From: https://www.kavoir.com/2009/02/styling-file-upload-select-input-control-input-typefile.html […]