How to customize input type file upload ?

We can transform the look and feel of almost every element of HTML but it is quite difficult to apply style and change the look of input type file. This tag is use for choosing a file from local machine and upload it on web.

In one of my project i have tried to change the look of input type file but i faced a lot of problems. I was not able to change background color and border color of input type file. Actually, by default it looks different in all browsers.

But after a long struggle i found the method to do this. Here is the method how you can customize your input type file.

[html]
<div id="uploads">
<div class="fakeupload">
<input type="text" id="fakeupload" name="fakeupload">
</div>
<input type="file" onchange="$(‘#fakeupload’).val($(this).val());" class="realupload" id="realupload" name="uploads">
</div>
[/html]

First i created a main div and given it a id “uploads” and set its background image as shown below. Then i created another div into it and given it class “fakeupload”. It contains input type text which will show the path of the file selected from the local machine. Outside the inner div i created input type file and positioned it over the input type text and set its opacity to none so that it is not visible. Then i used jquery on onchange event to show the path of the selected file into the input type text.

Here is the CSS which i used:-

[html]
#uploads {
margin: 6px 0;
padding: 0 0 9px;
position: relative;
width: 310px;
}
#uploads div.fakeupload {
background: url("../images/browse1.gif") no-repeat scroll 100% 50% transparent;
cursor: pointer;
}
#uploads div.fakeupload input {
width: 219px;
height: 29px;
}
#uploads input.realupload {
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 310px;
z-index: 2;
}
[/html]

The final output looks like this

Hope it helps ! 🙂
Kapil Chotwani
kapil@intelligrape.com