The custom upload button <input type = "file" name = "file"/> (hides the file under the button), inputbutton
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> define the input type = "file" style </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>
</Head>
<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 = "28" onchange = "document. getElementById ('textfield '). value = this. value "/>
<Input type = "submit" name = "submit" class = "btn" value = "Upload"/>
</Form>
</Div>
</Body>
</Html>