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

user_150370 0
Viewed 191347

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', '');
google-chrome css html jquery javascript
27 Answers

Wrap with and make invisible. Work in Chrome, Safari && FF.

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}
<label>
  <input type="file">
  select file
</label>

user_5339760

Even you set opacity to zero, the tooltip will appear. Try visibility:hidden on the element. It is working for me.

user_24604450

It works for me!

input[type="file"]{
  font-size: 0px;
}

Then, you can use different kind of styles such as width, height or other properties in order to create your own input file.

user_17410270

Surprise to see no one mentioned about event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });
user_39168310

I know it is a bit of a hack, but all I required was to set the color to transparent in the style sheet - inline would look like this style="color:transparent;".

user_106216420

Best option to Hide the tooltip is combining the following properties :

  1. On the input : color:white; (if the background is white to blind the color of text, if another color, use that color).

  2. if there is any other element next to the input use position: absolute; to place the element above the tooltip *( be careful leave the button visible, hide just the tooltip)

user_166151950

For anybody that the 3 top did not work:

create your input element:

<input type='file' name='file' id='file' />

set style for the input element by it's Id to where it appears non-existent:

#file{ color: #ffffff; width: 0px; }

then create a new button infront of the original input, with onclick function to run javascript that clicks the original input:

<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' /> 
// can see the new button but not the original input:

Javascript:

function clicker(){ document.getElementById('file').click(); }

RESULT: 

function clicker(){
document.getElementById('file').click();
}
#file{
  color: #ffffff;
  width: 0px;
}
<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>

</body>
</html>

user_173608990 
style="color: transparent; width:110px"

This solution worked for me as below:

<input class="ml-4"
       type="file"
       style="color: transparent; width:110px"
       ng2FileSelect
       [uploader]="uploader"
       multiple />
user_195769280
Related