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

• Tweet

• Tweet

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!