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

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