How to rename HTML “browse” button of an input type=file?

Question

How to rename the browse button as \"Select the file\"? E.g.:

Answer 1

AFAIK you cannot change the button text, it is hard coded in the browsers.

But there are several workarounds to put a button with diferent text/image on a form:

link

Answer 2

1. Wrap the <input type="file"> with a <label> tag;
2. Add a tag (with the text that you need) inside the label, like a <span> or <a>;
3. Make this tag look like a button;
4. Make input[type="file"] invisible via display: none.

Answer 3

Here is the best, simple, short and clean way to "rename" the text of an input with file type and without JQuery, with pure HTML and javascript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

Answer 4

The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.

You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.