Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Input file custom button beautification (demo)_HTML/Xhtml_web page production

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

WBOY

Release： 2016-05-16 16:40:48

Original

1482 people have browsed it

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:

Related labels：

file input beautify

source：php.cn

Previous article：Introduction to HTML tag semantics_HTML/Xhtml_Web page production Next article：How to transfer the value of the select drop-down box to the id to implement the code_HTML/Xhtml_Web page production

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn