<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> defines the style of input type= "file" </title>
<style type= "Text/css" >
body{font-size:14px;}
input{vertical-align:middle; margin:0; padding:0}
. file-box{position:relative;width:340px}
. txt{height:22px; border:1px solid #cdcdcd; width:180px;}
. btn{Background-color: #FFF; border:1px solid #CDCDCD; height:24px; width:70px;}
. file{Position:absolute; top:0; right:80px; height:24px; Filter:alpha (opacity:0); opacity:0;width:260px}
</style>
<body>
<div class= "File-box" >
<form action= "" method= "Post" enctype= "Multipart/form-data" >
<input type= ' text ' name= ' TextField ' id= ' textfield ' class= ' txt '/>
<input type= ' button ' class= ' btn ' value= ' Browse ... '/>
<input type= "File" Name= "Filefield" class= "file" id= "Filefield" size= "" onchange= "document.getElementById (' TextField '). Value=this.value "/>
<input type= "Submit" name= "Submit" class= "btn" value= "Upload"/>
</form>
</div>
</body>
Custom upload button <input type= "file" name = "File"/> (hides file under button)