The appearance of input file under system defaults:
We change the default appearance of the system by defining the border of input:
If you want to make the navigation button more beautiful, we want to define its background color, and even want to use the background image to replace, through the CSS definition input flie is really impossible. Accidentally saw an article: Input File File selection box to beautify the author is the system default button set transparency to 0, and then define a label label style, to cover the transparent drop button.
According to the author's method, I have also experimented with the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>input file's alternative approach </title> <style type=" Text/css "> <!--* {font-size:1 2px {margin:0}. Line {position:relative, float:left padding:8px 0}. Line span {Float:left} input {border:1p x solid #888; Vertical-align:middle}. file {position:absolute; left:90px; top:8px; Display:none;filter:alpha (opacity=0); opacity:0 }. file1 {padding:2px 10px; display:block float:left; background: #FF66CC; color: #fff; z-index:1; margin-left:5px; verti Cal-align:middle; Cursor:pointer}. inputstyle {width:150px; border:1px solid #888; z-index:99}--> </style> </pead> &L t;body> <div class= "line" > <span> <label> Upload file:</label> <input name= "" type= "text"Id=" Viewfile "onmouseout=" document.getElementById (' upload '). style.display= ' None '; "class= inputstyle"/> </ span> <label for= "unload" onmouseover= "document.getElementById" (' upload '). style.display= ' block '; "class=" File1 "> Browse ...</label> <input type=" file "onchange=" document.getElementById (' Viewfile '). value= This.value;this.style.display= ' None '; "class=" File "id=" upload "/> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Effect:
Although a lot of labels, but this cynical approach is still worth studying. There is no better and more scientific approach yet to be explored.
