When we make a form, the input, textarea, button styles are easier to define, and the select and input file styles are difficult to define.
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 ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>input file's alternative approach </title>
<style type= "Text/css" >
!--
* {font-size:12px}
Body {margin:0}
. line {position:relative; float:left; padding:8px 0}
. Line span {Float:left}
Input {border:1px 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; Vertical-align:middle; Cursor:pointer}
. inputstyle {width:150px; border:1px solid #888; z-index:99}
-->
</style>
<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>
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
