How to define input type=file style

How to define input type=file style
Why beautify the file control? Just imagine that all the other children are dressed neatly and beautifully, but two of them ignore you. It is so discordant.

The original file control looks like this:

Don't think this is composed of a text and a button. It is a control . The HTML code is:

Copy code
The code is as follows:

<input type="file" name="file" />

In this case, we use a text and a button to display the style of this file. The HTML code is as follows:

Copy code
The code is as follows:

<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='Browse...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="Upload" />
</form>
</div>

The outer div is to provide a position reference for the input inside, because relative positioning is required when writing the style, so that the real file control covers the simulated one, and then hides the file control (even if the file control is invisible), so the CSS code is as follows:

Copy code
The code is as follows:

.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD; height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

Effect picture:
Click to view original image
Finally, leave a DEMO: click to view demo


Tip: You can modify some of the code before running

<<:  Interpreting MySQL client and server protocols

>>:  Using CSS to implement image frame animation and curve motion

Recommend

Detailed explanation of JavaScript axios installation and packaging case

1. Download the axios plugin cnpm install axios -...

How to check the version of Kali Linux system

1. Check the kali linux system version Command: c...

Linux MySQL root password forgotten solution

When using the MySQL database, if you have not lo...

Summary of basic knowledge points of MySql database

Table of contents Basic database operations 2) Vi...

How to set underline in HTML? How to underline text in HTML

Underlining in HTML used to be a matter of enclos...

Front-end advanced teaching you to use javascript storage function

Table of contents Preface Background Implementati...

40 web page designs with super large fonts

Today's web designs tend to display very larg...

Two ways to correctly clean up mysql binlog logs

mysql correctly cleans up binlog logs Preface: Th...

Detailed explanation of meta tags (the role of meta tags)

No matter how wonderful your personal website is,...

MySQL SQL Optimization Tutorial: IN and RANGE Queries

First, let's talk about the in() query. It is...

Complete steps for using Nginx+Tomcat for load balancing under Windows

Preface Today, Prince will talk to you about the ...

Nginx service 500: Internal Server Error one of the reasons

500 (Internal Server Error) The server encountere...