How to change the default upload file button style using pure HTML and CSS_html/css_WEB-ITnose

If you have ever tried it, you will know that implementing a unified upload file button using pure CSS styles and HTML can be troublesome. Take a look at the screenshots from different browsers below. It's obvious that they look very different.

Our goal is to create a simple upload file button implemented in pure CSS that has the same look and layout in all browsers. We can do this:

Step 1. Create a simple HTML tag

1

2

3

4

< div class = "fileUpload btn btn-primary" >

  < span >Upload

 ; input type = "file" class = "upload" />

Step 2: CSS: A little tricky

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.fileUpload {

position : relative ;

overflow : hidden ;

margin : 10px ;

}

.fileUpload input.upload { position : absolute ;

top : 0 ;

right : 0 ;

margin : 0 ;

padding : 0 ;

font-size : 20px ;

cursor : pointer ;

opacity: 0 ;

filter: alpha(opacity= 0 );

}

To keep it simple, I use a button with BootstrapCSS styles applied (div.file-upload).

Demo:

Upload button to display the selected file

Unfortunately pure CSS cannot do this. However, if you really want to display the selected file, the following JavaScript snippet can help you.

JavaScript:

1

2

3

document.getElementById( "uploadBtn " ).onchange = function () {

document.getElementById( "uploadFile" ).value = this .value;

};

　DOM:

1

2

3

4

5

< input id = "uploadFile" placeholder = "Choose File" disabled = "disabled" />

< div class = "fileUpload btn btn-primary" >

                                                                                                                       div >

Demonstration: