Jump to content

Change the button 'Choose file'

Recommended Posts


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:

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';
.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;

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?

Link to comment
Share on other sites

  • 1 year later...


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 ?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...