Change the "No file chosen":

Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Then style the label as a button if you want.


Try this its just a trick

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

How it works

It's very simple. the Label element uses the "for" tag to reference to a form's element by id. In this case, we used "img" as the reference key between them. Once it is done, whenever you click on the label, it automatically trigger the form's element click event which is the file element click event in our case. We then make the file element invisible by using display:none and not visibility:hidden so that it doesn't create empty space.

Enjoy coding


I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article