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

Question

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', '');

Answer 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=" "/>

Answer 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.

Answer 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

Answer 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

Answer 5

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

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

Answer 6

You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

Answer 7

This one works for me (at least in Chrome and Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>

Answer 8

This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.

My solution also requires the use of the following pseudo selector to style the button:

::-webkit-file-upload-button

Try this: http://jsfiddle.net/J8Wfx/1/

FYI: This will only work in webkit browsers.

P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know

Answer 9

Across all browsers and simple. this did it for me

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

Answer 10

All the answers here are totally overcomplicated, or otherwise just totally wrong.

html:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css:

input {
    display: none;
}

javascript:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.

Answer 11

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>

Answer 12

You will need to customise the control quite a lot to achieve this.

Please follow the guide at: http://www.quirksmode.org/dom/inputfile.html

Answer 13

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

Answer 14

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.

Answer 15

It's better to avoid using unnecessary javascript. You can take advantage of the label tag to expand the click target of the input like so:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

Even though input is hidden, the link still works as a click target for it, and you can style it however you want.

Answer 16

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
 });

Answer 17

Give -webkit-appearance: a go. Worth a try anyway.

http://css-infos.net/property/-webkit-appearance

Hope that helps :)

Answer 18

Directly you can't modify much about input[type=file].

Make input type file opacity:0 and try to place a relative element [div/span/button] over it with custom CSS

Try this http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Answer 19

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 />

Answer 20

you can set a width for yor element which will show only the button and will hide the "no file chosen".

Answer 21

I look for good answer for this... and I found this:

First delete the 'no file chosen'

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

then work the button with the -webkit-file-upload-button, this way:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

hope this is what you were looking for, it works for me.

Answer 22

Combining some of the suggestions above, using jQuery, here is what I did:

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

And:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

And put the class "unused" on your file inputs. This is simple and works pretty well.

Answer 23

The best solution, for me, is to wrap input [type="file"] in a wrapper, and add some jquery code:

$(function(){
 function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 75px;
 height: 35px;
}
#uploadImage{
 position: relative;
 top: 30px;
 left: 70px;
}
.button{
 position: relative;
 width: 75px;
 height: 35px;
 border: 1px solid #000;
 border-radius: 5px;
 font-size: 1.5em;
 text-align: center;
 line-height: 34px;
}

<form action="#" method="post" id="form" >
 <div class="button">
  Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

Answer 24

I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like: "No file chosen ").

This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this:

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">    

Answer 25

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;".

Answer 26

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)

Answer 27

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>

Answer 28

Forget about removing the tooltip. Make the capacity of file input into zero, put a div box above it with absolute position, so whenever you click on the div, the file input would prompt.

<div class="file_cover">Click to upload file</div>
<input type="file">

input[type='file'] {
  opacity: 0;
}
.file_cover {
  position: absolute;
  top: 0;
}

Answer 29

I found a perfect solution for this

You can just add a label and link it to the input element

<label for="image__input">Choose a file</label>
<input type="file" id="image__input"/>

The functionality of the input element will be automatically applied to the label too

Then make the display of the input element as following to remove it

input[type='file'] {
   display: none;
}

After that you can style the label as you like