Style css input file Firefox (working on chrome too) - html

Question

I'm working on an upload page where I cannot use jquery and bootstrap.
On Chrome I used this code css code to solve my problem
.btn-file-upload{
width: 200px;
position:relative;
height: 40px;
}
.btn-file-upload:after{
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 99%;
background: white;
color: black;
border:1px solid rgb(0, 0, 126);
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 1.7;
overflow: visible;
}
<input type="file" name="theFile" size="60" value="label" onkeypress="javascript:return false;" onchange="changeFileName()" class="btn-file-upload">
How can I make it work on firefox too without breaking the chrome version?
Also, there is a way to make the input file drag&drop on Internet Explorer too?

Answer 1

Ok after some hours of trial&error I actually found a real solution to this problem
First I modified the css without the after
.btn-file-upload{
position: relative;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: white;
color: black;
border: 1px solid rgb(0, 0, 126);
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 1.7;
overflow: visible;
height: 40px;
}
Second I used a button+input instead of input to be able to set a custom message
<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;" class="btn-file-upload">Label</button>
<input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()">
<span id="filename" class="Testo">No file selected</span>
Finally I used some js to be able to drag&drop (the changefilename was already working)
function changeFileName(){
document.getElementById("filename").innerText = code to get file name in struts;
}
//code here go on the onload
document.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {
evt.preventDefault();
};
document.getElementById("inputdrop").ondrop = function(evt) {
document.getElementById("getFile").files = evt.dataTransfer.files;
changeFileName();
evt.preventDefault();
};
The only limitation is that this is not working on Internet Explorer and the old Edge... But, at least, this works on both chrome and firefox and the new edge.