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

WBOY
Release: 2016-06-24 11:47:27
Original
1541 people have browsed it

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:

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!