How to Use HTML and CSS to change the default Upload File button style,

Source: Internet
Author: User

How to Use HTML and CSS to change the default Upload File button style,

If you have tried it before, you will know that it may be difficult to use a pure CSS style and HTML to implement a unified Upload File button. Let's look at the different browsers below. Obviously, they look very different.

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

Step 1. Create a simple HTML Tag

1234 <div class="fileUpload btn btn-primary">    <span>Upload</span>    <input type="file" class="upload" /></div>

Step 2: CSS: a little tricky

12345678910111213141516 .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);}

For the sake of simplicity, I used the button that applied the BootstrapCSS style (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 code snippets can help you.

JavaScript:

123 document.getElementById("uploadBtn").onchange = function () {    document.getElementById("uploadFile").value = this.value;};

DOM:

12345 <input id="uploadFile" placeholder="Choose File" disabled="disabled" /><div class="fileUpload btn btn-primary">    <span>Upload</span>    <input id="uploadBtn" type="file" class="upload" /></div>

Demo:

Original article address: geniuscarrier.com

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.