Here is an example I want to share with you: code demonstration.
Below is the HTML code snippet:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="file-upload btn btn-primary">
<span>Upload</span>
<br>
<input id="uploadBtn" class="upload" type="file">
</div>
The CSS code looks like this:
.btn {
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.file-upload input.upload {
cursor: pointer;
font-size: 20px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
.file-upload {
margin-left: 10px;
overflow: hidden;
position: relative;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
color: #fff;
}
And here is the JavaScript code part:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
While testing this on JSFiddle, the textbox updates when the upload button is clicked, but when I try it in Firefox, the textbox doesn't get updated.
I found some helpful tips on How to Style a HTML file upload button using Pure CSS
Any suggestions or solutions for this issue?