How can I remove the "No file chosen" tooltip from a file input in Chrome?

I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).

Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.

I've tried this with no luck:

$('#myFileInput').attr('title', '');

Solution 1:

The default tooltip can be edited by using the title attribute

<input type='file' title="your text" />

But if you try to remove this tooltip

<input type='file' title=""/>

This won't work. Here is my little trick to work this, try title with a space. It will work.:)

<input type='file' title=" "/>

Solution 2:

For me, I just wanted the text to be invisible and still use the native browser button.

input[type='file'] {
  color: transparent;
}

I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.

Solution 3:

This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.

A hacky solution:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

Fiddle

Solution 4:

Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag

<input type="file" style="color:transparent; width:70px;"/>

End of the problem

Solution 5:

I found a solution that is very easy, just set an empty string into the title attribute.

<input type="file" value="" title=" " />