html - Change the "No file chosen":

Question

I have a button "Choose file" as follows (I am using Jade but it should be the same as Html5):

 input(type='file', name='videoFile')

In the browser this shows a button with a text next to it "No file chosen". I would like to change the "No file chosen" text to something else, like "No video chosen" or "Choose a video please". I followed the first suggestions here:

I don't want to see 'no file chosen' for a file input field

But doing this did not change the text:

 input(type='file', name='videoFile', title = "Choose a video please")

Can anybody help me figure out where the problem is?

Answer 1

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.