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;

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;}

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: