Input file custom button beautification (demo)

Input file custom button beautification (demo)

I have written such an article before, but I used a js script, which has the advantage of being able to display the file path.

If you don't want to see the path and only display the custom button, there is another way. The following just uses CSS techniques to achieve it.

The key is to give the file field a font-size, set a relatively large value, so that the capitalization of the form changes (the appearance is different in each browser, but the capitalization has 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(//img.jbzj.com/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:

<div class="fileInputContainer">
<input class="fileInput" type="file" name="" id="" />
</div>

DEMO:

<<:  How to solve the problem of too many open files in Linux

>>:  Implementation process of the magnifying glass effect in the Javascript example project

Recommend

The meaning of the 5 types of spaces in HTML

HTML provides five space entities with different ...

Operations of communication between Docker containers and external network communication

Communication between containers 1. Network shari...

How to create Baidu dead link file

There are two types of dead link formats defined b...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

The difference between key and index in MySQL

Let's look at the code first: ALTER TABLE rep...

Web Design: The Accurate Location and Use of Massive Materials

Three times of memorization allows you to remembe...

Detailed steps for installing MinIO on Docker

Table of contents 1. Check whether the docker env...

How to create, start, and stop a Docker container

1. A container is an independently running applic...

Implementation example of specifying container ip when creating a container in docker

When Docker creates a container, it uses the brid...

How to prevent users from copying web page content using pure CSS

Preface When I was typing my own personal blog, I...

MySql quick insert tens of millions of large data examples

In the field of data analysis, database is our go...

MySQL optimization tutorial: large paging query

Table of contents background LIMIT Optimization O...

Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop

Table of contents 1. Why is JavaScript single-thr...

Detailed explanation of the data responsiveness principle of Vue

This article is mainly for those who do not under...

How to install ionCube extension using pagoda

1. First install the pagoda Installation requirem...