Customizing an input form


#1

Hi,i am customizing a an input to be easy to use,my input is used to browse file(like uploading form).
the idea is that we can click in any place of the input to get the browsing window, and my problem is after choosing the file ,we can see the path and the name of the file in the input ?
can you help me ?

the HTML******

Super

                            <div class="fileinputs">
                             <input id="uploadFiles1" name="files" type="file" size="28" class="file hidden" >
                               <div class="fakefile">
                               <input readonly="" type="text">

                               </div>
                            </div>
                           <a href="" class="btnBrowse">Browse...</a>
                          </div>
                     </div>
                    

                     <div class="upload-box">
               <a href="*" id="aploadbutton" class="btn primary">upload</a>
          </div>
                </div>
             </div>
          </div>
</div>

the CSS***********

.fileBox{
float:left;
width:608px;
overflow:hidden;
}

.uploadBrowse{
position:relative;
z-index:0;
float:left;
width:100%
}

.btnBrowse{
float:left;
font-size:12px;
font-weight:bold;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fdfefe), to(#dee9f0));
background: -moz-linear-gradient(#fdfefe, #dee9f0);background: linear-gradient(#fdfefe, #dee9f0);
-pie-background: linear-gradient(#fdfefe, #dee9f0); border: 1px solid #6c7c89;
-webkit-border-radius: 5px; -moz-border-radius: 5px;padding:4px 10px; margin-left:3px; color:#000}

.fileinputs{position:relative;}

.file {
position: absolute;
top:0px; right:0;
font-size:30px;
width: 700px;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index:999;
cursor: pointer;

}

.fakefile input {
float: left;
font-size: 11px;
color: black;
padding: 3px 10px;
width: 500px;
border: 1px solid #D1D1D1;
}


#2

#3

#4