Input file custom button beautification (demo)_HTML/Xhtml_web page production

I have written an article like this before but used a js script. The advantage is that it can display the file path.

If you can not see the path and only display the custom button, there are other methods. The following is just a css technique.

The key is to give font-size to the file field and set a relatively large value so that the capitalization of the form changes (the appearance of each browser is different, but the capitalization is changed) as shown below:

input{font-size:100px;}

Then use position and transparency to achieve the effect you want. The specific code is as follows:

Copy code

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;
}

Copy code

The code is as follows:

DEMO: