Customize the style of the <input type="file"> element used when uploading files in HTML

Customize the style of the <input type="file"> element used when uploading files in HTML

In a web page, the <input type="file"> element is basically used when uploading files. Its default style is:

Under Chrome:

In IE:

Regardless of which of the above, the style is relatively simple and does not coordinate with the style of many web pages.

There are many occasions to change the display style according to user needs and design style.

If you want to make a bootstrap-style upload button like the following, how can you implement it?

Basic elements needed to build an upload button


Copy code
The code is as follows:
<span> <span>Upload</span> <input type="file"> </span>

Effect (chrome):

What you see now is displayed in two lines.

The reason why the periphery is not replaced with a div is that in IE7- browser, as long as it is not set to inline, its width will be expanded to the maximum possible width. If it is set to inline, the width of the element cannot be adjusted, so using span and setting it to inline-block can solve this problem.

Add style to turn two lines into one line


Copy code
The code is as follows:
<span"> <span>Upload</span> <input type="file"> </span>

css:


Copy code
The code is as follows:
.fileinput-button { position: relative; display: inline-block; } .fileinput-button input{ position: absolute; right: 0px; top: 0px; }

Effect:

There is no light blue border by default. It will only be displayed after clicking the mouse. It is displayed here for clear viewing.

By setting the outer span to display:relative and the input to display:absolute, they are all out of the document flow.

By limiting the input to the outer span and performing absolute positioning, the original two-line display is changed to a single line display.

In fact, it has overflowed here. The real width is the width of the "Upload" text. Modify the fileinput-button style to add overflow: hidden


Copy code
The code is as follows:
.fileinput-button { position: relative; display: inline-block; overflow: hidden; }

Effect:

Very interesting. You can see the blue border on the top and right, which actually hides the overflow on the left and bottom.

At this time, clicking the word "Upload" with the mouse is actually clicking on the input, which can display the "Open" dialog box, because the input is closer to the user than "Upload" in the display hierarchy.

Note the right in the input positioning, why not use left positioning.

When we change to left.

Effect (chrome):

Effect (IE):

In Chrome, the selection button in the input element is exposed, but it doesn’t matter, you can make it transparent by setting transparency later.

However, the input box will be exposed in IE. The key is that when the mouse moves to the input box, the pointer will change to the input state, which is very difficult to handle.

By moving the input box to the left using the right positioning method, you can avoid the mouse pointer turning into input state in IE.

Transparent input element

CSS:


Copy code
The code is as follows:
.fileinput-button { position: relative; display: inline-block; overflow: hidden; } .fileinput-button input{ position: absolute; left: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; }

Effect:

The input is completely gone, but clicking "upload" still works.

Can support IE8+.

Import bootstrap and add button styles

Add references to external css and js in head.


Copy code
The code is as follows:
<link rel="stylesheet" href="bootstrap/bootstrap.css"> <link rel="stylesheet" href="bootstrap/bootstrap-theme.css"> <script src="bootstrap/jquery-1.10.2.js"></script> <script src="bootstrap/bootstrap.js"></script>

Add button style.


Copy code
The code is as follows:
<span> <span>Upload</span> <input type="file"> </span>

Effect:

Solving the size problem

If you add width:100px to the fileinput-button style and set the outer span to 100px wide, you will find that there is no response when you click the bottom part. The reason is that the input is the default size and cannot cover the bottom part.

You can solve the overlap problem by setting a large font size for the input to expand it. Here we set it to 200px.


Copy code
The code is as follows:
.fileinput-button input{ position:absolute; right: 0px; top:0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; }

This will solve the coverage problem.

Finish.

Reference: jQuery-File-Upload

If you want to be compatible with IE7, you can refer to the writing method in jQuery-File-Upload.

Code:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3. < head >   
  4.      < title > </ title >   
  5.      < meta   http-equiv = "Content-Type"   content = "text/html;charset=utf-8" >   
  6.      < link   rel = "stylesheet"   href = "bootstrap/bootstrap.css" >   
  7.      < link   rel = "stylesheet"   href = "bootstrap/bootstrap-theme.css" >   
  8.      < script   src = "bootstrap/jquery-1.10.2.js" > </ script >   
  9.      < script   src = "bootstrap/bootstrap.js" > </ script >   
  10.      < style >   
  11. .fileinput-button {
  12. position: relative;
  13. display: inline-block;
  14. overflow: hidden;
  15. }
  16. .fileinput-button input{
  17. position:absolute;
  18. right: 0px;
  19. top: 0px;
  20. opacity: 0;
  21. -ms-filter: 'alpha( opacity = 0 )';
  22. font-size: 200px;
  23. }
  24.      </ style >   
  25. </ head >   
  26. < body   style = "padding: 10px" >   
  27.      < div   align = "center" >   
  28.          < span   class = "btn btn-success fileinput-button" >   
  29.              < span > Upload </ span >   
  30.              < input   type = "file" >   
  31.          </ span >   
  32.      </ div >   
  33. </ body >   
  34. </ html >   

<<:  Using vue3 to imitate the side message prompt effect of Apple system

>>:  Detailed explanation of the implementation example of group ranking in Mysql tutorial

Recommend

Detailed explanation of simple snow effect example using JS

Table of contents Preface Main implementation cod...

Example of how to check the capacity of MySQL database table

This article introduces the command statements fo...

Using js to implement the two-way binding function of data in Vue2.0

Object.defineProperty Understanding grammar: Obje...

Detailed explanation of Docker container cross-host multi-network segment communication solution

1. MacVlan There are many solutions to achieve cr...

Solution to the garbled problem of web pages when the encoding is set to utf-8

Recently, when I was writing web pages with PHP, I...

Solve the problem that the MySQL database crashes unexpectedly, causing the table data file to be damaged and unable to start

Problem: The MySQL database crashed unexpectedly ...

Detailed tutorial on installing mysql8.0.22 on Alibaba Cloud centos7

1. Download the MySQL installation package First ...

CSS flexible layout FLEX, media query and mobile click event implementation

flex layout Definition: The element of Flex layou...

How to use bar charts in Vue and modify the configuration yourself

1. Import echart in HTML file <!-- Import echa...

One question to understand multiple parameters of sort command in Linux

The sort command is very commonly used, but it al...

HTML+CSS project development experience summary (recommended)

I haven’t updated my blog for several days. I jus...

How to visualize sketched charts in Vue.js using RoughViz

introduce A chart is a graphical representation o...

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

Preface After installing MySQL and Navicat, when ...

Advanced explanation of javascript functions

Table of contents Function definition method Func...

JavaScript implements asynchronous acquisition of form data

This article example shares the specific code for...