Use label tags and CSS to beautify files to upload a form

File Upload type form <input type= "file"/> is a form type that lets a lot of front-end developers tangle, because it's a style that can't be defined with CSS alone. Last week's work has a lot of upload pictures of the page, and encountered this problem, so today, my solution dedicated to everyone: the use of label tags and CSS together to create a style controllable and compatible with the mainstream browser IE6 outside the upload form.
Realize the idea is easy to understand:

First, we want to add a button with the size of the file album, and then use the label to define the callout for the original file type form (for the explanation and usage of the label, which is not available here, please refer to the HTML manual if you don't understand it). As a result, a button that triggers the selection of a file form comes out. Next, I believe a lot of people know how to do it.
With a button that triggers the file form, simply drag the file form out of the document stream by absolute positioning, and then elevate its hierarchy to a higher than the button button with the Z-index property, and set the transparency of the file form to 0, so that The file form is just covered on the button button and can trigger the selection files form. Here is a point to note that Firefox can not pass the width of the value set, so you need to use the size value of input to set the file form width value.
Finally, enclose the molding code in the sample:

The code is as follows	Copy Code
<div class=btns> <input id=input_file_molding class=btn_file_molding size=6 type=file> <label for=input_file_molding> <input value= Add photos type=button></label> </DIV>

CSS code:

The code is as follows	Copy Code
. btns{position:relative} . Btns input{width:120px;height:30px} . Btns. btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 None;filter:alpha (opacity=0); opacity:0 }/*file Z-index is greater than button*/

Cases

The code is as follows

Copy Code

<!--DEMO start--> <div id= "Demo" > <div class= "Btns" > <input type= "File" id= "Input_file"/> <label for= "Input_file" ><input type= "button" value= "Add Photo"/></label> </div> <div class= "Btns" > <input type= "File" class= "Btn_file_evolve" id= "Input_file_evolve"/> <label for= "Input_file_evolve" ><input type= "button" value= "Add Photo"/></label> </div> <div class= "Btns" > <input type= "File" size= "6" class= "btn_file_molding" id= "input_file_molding"/> <label for= "input_file_molding" ><input type= "button" value= "Add Photo"/></label> </div> </div> <!--DEMO end-->

A few attention details:
1.file forms must be the same height as the button buttons;
2. Because browsers do not match the file form, its borders must be hidden to avoid the incompatibility of browsers;
3. Firefox directly defined by the style width is not valid, you need to set the file width by size;
4.ie6 can bind the click event of the file form to the button with JS, not detailed here.