Css custom file upload control style (compatible with IE6)

To directly control the File Upload control through CSS, it is basically boring. Of course, there are also some solutions, such as the Mr. Think article "using label labels and CSS to beautify file upload forms (not compatible with IE6)". This problem happened yesterday. Let's record it.

First<input type="file">It is safer to wear a set of elements, isn't it? Check the Code:

<Span class = "input-file"> browse... <input type = "file"> </span>

With this secure outer container, we can start it. There are two core issues: first, the ugly native upload control is hidden; second, the Click Upload function is supported.

Key code snippets:

.input-file {overflow:hidden;position:relative;}

.input-file input{opacity:0;filter:alpha(opacity=0);font-size:100px;position:absolute;top:0;right:0;}

The reason why the font size is PX is that the button area on the right of the upload control is enlarged, and the cursor is in the default state when positioned on the right.

In addition, if you want to support the mouse hover effect, you can alsospanLabelaLabel, and then add the hover pseudo class.

<A href = "javascript: void (0);"> browse... <input type = "file"> </a>

Seems fully compatible? IE is fine. Let's take a look at it for yourself.

Demo:

<! Doctype html> 





Tip: the code can be modified before running!