How to change the default upload file button style with plain HTML and CSS

If you've ever tried it, you'll know that it can be cumbersome to implement a unified upload file button with a pure CSS style and HTML. Take a look at the different browsers below. Obviously, they look very different.

Our goal is to create a concise, pure CSS implementation, in all browsers look and layout is the same as the upload file button. We can do this:

Step 1. Create a simple HTML tag

1234	< div class = "FileUpload btn btn-primary" > &NBSP;&NBSP;&NBSP;&NBSP; < span >upload</ span > &NBSP;&NBSP;&NBSP;&NBSP; < input type = "file" class = "upload" /> </ div >

2nd step: CSS: It's 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 simplicity, I use a button (Div.file-upload) with the bootstrapcss style applied.

Demonstrate:

Upload button to display the selected file

Unfortunately, pure CSS does not do this. However, if you really want to display the selected file, the following JavaScript snippet 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>

Demonstrate:

Original address: geniuscarrier.com

How to change the default upload file button style with plain HTML and CSS