Use the label and CSS to beautify the File Upload form (not compatible with IE6)

I was very busy recently. I had to wait for a month before updating my blog.
The file upload type form <input type = "file"/> is a form type that many front-end developers struggle with, because it is a style that cannot be used to define compatible with CSS. There was a page for uploading images in batches in my work last week, and I encountered this problem again. So today I will dedicate my solution to you: use the label and CSS to create a controllable style and be compatible with the uploading form of mainstream browsers outside IE6.
Easy to understand:Click here to view the sample

First, we need to add a button with the size of the file album, and then use the label to define the annotation for the initial file form (for the label interpretation and usage, This is not detailed here, for more information, see the HTML manual ). In this way, a button that can trigger the selection of file forms will come out. Next, I believe many people know how to do it.
With a button that can trigger the file form, you only need to drag the file form out of the document stream through absolute positioning, and then use the z-index attribute to raise its level to a higher level than the button, at the same time, set the transparency of the file form to 0. In this way, the file form overwrites the button and triggers the selection of the file form. In FireFox, the width value cannot be set. Therefore, the size value of input must be used to set the width value of the file form.
Finally, the molding code in the example is attached:
HTML code:

CSS 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 must be greater than button */

Several notes:
1. the height and width of the file form and button must be the same;
2. Because different browsers have different file forms, their borders must be hidden to avoid incompatibility issues with different browsers;
3. The width defined by style in firefox is invalid. You need to use size to set the file width;
4. IE6 can bind the Click Event of the file form to the button using JS, which is not described here.

In addition, this article provides a main idea, on which you can further beautify and expand, such as adding text styles of background images.