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

How to deploy Angular project using Docker

There are two ways to deploy Angular projects wit...

How to perfectly implement the grid layout with intervals on the page

Typical layout examples As shown in the above pic...

Implementing simple chat room dialogue based on websocket

This article shares the specific code for impleme...

Metadata Extraction Example Analysis of MySQL and Oracle

Table of contents Preface What is metadata Refere...

Detailed tutorial on installing ElasticSearch 6.4.1 on CentOS7

1. Download the ElasticSearch 6.4.1 installation ...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

js dynamically generates tables (node ​​operations)

This article example shares the specific code of ...

CSS achieves footer "bottom absorption" effect

We often encounter this problem: how to use CSS t...

Detailed explanation of Linux curl form login or submission and cookie usage

Preface This article mainly explains how to imple...

WeChat applet implements calculator function

WeChat Mini Programs are becoming more and more p...

MySQL 5.7.18 free installation version configuration tutorial

MySQL 5.7.18 free installation version installati...

Nginx configuration based on multiple domain names, ports, IP virtual hosts

1. Type introduction 1.1 Domain-based virtual hos...

Methods and steps to upgrade MySql5.x to MySql8.x

Several Differences Between MySQL 5.x and MySQL 8...

Web page production TD can also overflow hidden display

Perhaps when I name this article like this, someon...