Go back
Bookmarked
0000088

Change default text of input type=“file”

Updated on October 13, 2021

The input type="file" by default will look like in the fiddle below, and I'm almost certain that is not what you or your visitors want. So how can it be customize?

There are two easy and simple ways of doing this. I'll show you down below, the first one is by using Bootstrap and the second one is by using jQuery. Choose whatever approach is better for you.

To achieve this, in both cases the default input button is hidden using the display CSS property and a new button element is added to replace it, so we can customize as we wish.

Bootstrap

jQuery

In this case the onclick attribute added to the button element is indicating to JavaScript to click on the hidden default input button whenever I click on the visible button.