Customizing the default browse button is now a very easy stuff 🙂

You will need only four things:

  1. File field
  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 */
  opacity: 0;
}
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>
    <div>
  </form>
</span>

That’s it!

You can refer these links for huge description:
http://www.michaelmcgrady.com/simple.jsp
http://www.quirksmode.org/dom/inputfile.html