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

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

css:

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

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:

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.

Add button style.

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.

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: