Change the button 'Choose file'

[Alexray]

Hello,

In case if you ever think about changing the button 'Choose file', that solution can be useful.
Of course we can not simply change its text or change the appearence with CSS, because it is a default browser button.
But we can add a label:

<script>
const customText = 'Select File';

document.addEventListener('DataPageReady', function (event) {
let fileInputs = document.querySelectorAll("input[type='file']");
for (let fileInput of fileInputs) {
let fileInputID = fileInput.id;
let labelF = `<label for="${fileInputID}" class="labelF">${customText}</label>`
fileInput.insertAdjacentHTML('beforebegin', labelF);
fileInput.style.display = 'none';
}
});
</script>
<style>
.labelF {
    text-align: center;
    background-color: #9e9e9e;
    border: 1px solid black;
    border-radius: 3px;
    padding: 2px;
    box-shadow: 2px 2px 6px black;
}
.labelF:hover {
    box-shadow: none;
}
</style>

Now you can set up the style you need by changing its CSS or change the text 'Select File'.

The main con of that solution, is that by hidind the default button, we also hide the text that usually goes next to it. Before you choose a file is says 'No file chosen', after you choose something it contains the name of the file.

 

What do you think guys, is it going to be useful for someone?

[Tim46]

Hi 

thanks for this code, just what I was looking for. Popped into footer and it worked great.  I had also modified the link name to + and it came up with 3 buttons- see attached image, when deployed to a WP site and viewed on iPhone or safari. 
 

any idea why this would happen ?