Inputfile Custom button beautification (DEMO) _ HTML/Xhtml _ webpage Creation

If you do not want to see the path, only display the Custom button, and use another method, the following is just implemented using the css technique, here we can see how powerful css is. I have previously written such an article, but I have used js scripts. The advantage is that I can display the file path.

If you do not want to see the path, only display the Custom button, and use another method, the following is just implemented using the css technique.

The key is to assign a font-size to the file field, set a relatively large value, and change the form in uppercase (the appearance of Each browser is different, but the uppercase is changed), for example:

Input {font-size: 100px ;}

Use position positioning and transparency to achieve the desired effect. The Code is as follows:

The Code is as follows:

. FileInputContainer {
Height: 256px;
Background: url (http://files.jb51.net/file_images/article/201212/2012122514125641.png );
Position: relative;
Width: 256px;
}
. FileInput {
Height: 256px;
Overflow: hidden;
Font-size: 300px;
Position: absolute;
Right: 0;
Top: 0;
Opacity: 0;
Filter: alpha (opacity = 0 );
Cursor: pointer;
}

The Code is as follows:

DEMO: