Customizing the default browse button is now a very easy stuff 
You will need only four things:
1. File filed
2. Javascript function
3. CSS classes and ID
4. Browse button image
Follow this process:
1. Javascript function:
<script type=’text/javascript’>
function fileForm(){
document.overForm.overInput.value = document.realForm.realInput.value;
}
</script>
2. CSS Classes and ID:
.fileUpload {
-moz-opacity:0; /* for Firefox */
-khtml-opacity: 0; /* for Safari */
filter:alpha(opacity: 0); /* for IE */
}
span.realSpan, span.overSpan{
position: absolute;
middle: 10px;
left: 10px;
}
span.realSpan{z-index: 20;}
span.overSpan{z-index: 10;}
#fileInputs{float:left;}
3. File filed:
<span class=”realSpan”>
<form name=’realForm’>
<input type=’file’ class=’fileUpload’ name=’realInput’ onkeyup=’fileForm();’ onmouseout=’fileForm();’ style=”cursor:pointer;”>
</form>
</span>
<span class=”overSpan”>
<form name=’overForm’>
<div id=”fileInputs” style=”clear:both;”>
<div id=”fileInputs”><input type=’text’ name=’overInput’></div>
<div id=”fileInputs”><input type=’image’ src=’browse_btn.jpg’ style=”cursor:arrow;” onmouseover=”window.status=”; return true;”></div>
</form>
</span>
Thats it!
You can refer these links for huge description:
http://www.michaelmcgrady.com/simple.jsp
http://www.quirksmode.org/dom/inputfile.html
