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:

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

Three notification bar scrolling effects implemented with pure CSS

Input file custom button beautification (demo)

Three notification bar scrolling effects implemented with pure CSS

MySQL-group-replication configuration steps (recommended)

How to add color mask to background image in CSS3

CSS3 realizes the mask barrage function

js handles account logout when closing the browser

Detailed deployment of Alibaba Cloud Server (graphic tutorial)

Simple operation of installing vi command in docker container

Detailed tutorial on installing Docker on CentOS 8

Installation of various versions of MySQL 8.0.18 and problems encountered during installation (essence summary)

Summary of the use of element's form elements

Recommend

Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in

Detailed explanation of MySQL Innodb storage structure and storage of Null values

Implementation code for using mongodb database in Docker

Steps for Vue3 to use mitt for component communication

Detailed explanation of primitive values and reference values in ECMAScript

Analysis of the process of publishing and deploying Spring Boot applications through Docker

Use Element+vue to implement start and end time limits

Vue sample code for online preview of office files

Solution to the problem of English letters not wrapping in Firefox

React uses routing to redirect to the login interface

Javascript to achieve the drag effect of the login box

Implementing a table scrolling carousel effect through CSS animation

JS implements WeChat's "shit bombing" function

Docker automated build Automated Build implementation process diagram

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)