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

You can do it with a simple css/jq workaround: Create a fake button which triggers the browse button that is hidden.

HTML

Open

CSS

input { display: none }

jQuery

$( 'button' ).click( function(e) {
    e.preventDefault(); // prevents submitting
    $( 'input' ).trigger( 'click' );
} );

demo