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

User · Answer

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

User · Answer

Give -webkit-appearance  a go  Worth a try anyway   http   css-infos net property -webkit-appearance  Hope that helps

User · Answer

The best solution  for me  is to wrap input  type  file   in a  wrapper  and add some jquery code    x000D   x000D    function    x000D   function readURL input   x000D          if  input files  amp  amp  input files 0    x000D              var reader   new FileReader    x000D               x000D              reader onload   function  e   x000D                      uploadImage   attr  src   e target result   x000D                x000D              reader readAsDataURL input files 0    x000D            x000D        x000D          image   change function    x000D          readURL this   x000D          x000D      x000D   image  x000D   position  absolute  x000D   top  0  x000D   left  0  x000D   opacity  0  x000D   width  75px  x000D   height  35px  x000D    x000D   uploadImage  x000D   position  relative  x000D   top  30px  x000D   left  70px  x000D    x000D   button  x000D   position  relative  x000D   width  75px  x000D   height  35px  x000D   border  1px solid  000  x000D   border-radius  5px  x000D   font-size  1 5em  x000D   text-align  center  x000D   line-height  34px  x000D    x000D   lt form action     method  post  id  form   gt  x000D    lt div class  button  gt  x000D    Upload lt input type  file  id  image    gt  x000D        lt  div gt  x000D        lt img id  uploadImage  src     alt  your image  width  350  height  300    gt  x000D    lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    lt label gt     lt input type  file  style  display  none   gt     lt a gt Open lt  a gt   lt  label gt    Even though input is hidden  the link still works as a click target for it  and you can style it however you want

User · Answer

Across all browsers and simple  this did it for me    x000D   x000D    function      x000D          input type  file     change function      x000D            if    this  val            x000D                     this  css  color     333    x000D             else  x000D                     this  css  color    transparent    x000D              x000D           x000D     x000D  input type  file    x000D      color  transparent  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  file  name  app cvupload  class  fullwidth input rqd  gt  x000D   x000D   x000D

User · Answer

I found a solution that is very easy  just set an empty string into the title attribute    lt input type  file  value    title       gt

User · Answer

Wrap  with  and make  invisible  Work in Chrome  Safari  amp  amp  FF    x000D   x000D  label    x000D    padding  5px  x000D    background  silver  x000D    x000D  label  gt  input type file    x000D      display  none  x000D    x000D   lt label gt  x000D     lt input type  file  gt  x000D    select file x000D   lt  label gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

All the answers here are totally overcomplicated  or otherwise just totally wrong   html    lt div gt       lt input type  file    gt       lt button gt Select File lt  button gt   lt  div gt    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

User · Answer

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

User · Answer

This one works for me  at least in Chrome and Firefox     lt input type  file  accept  image    title   amp nbsp    gt

User · Answer

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            lt div gt       lt input type  file   gt       lt span id  val  gt  lt  span gt       lt span id  button  gt Select File lt  span gt   lt  div gt             button   click function          input type  file     trigger  click           input type  file     change function           val   text this value replace  C   fakepath   i                Fiddle

User · Answer

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

User · Answer

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

User · Answer

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

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

User · Answer

The default tooltip can be edited by using the title attribute   lt input type  file  title  your text    gt    But if you try to remove this tooltip   lt input type  file  title     gt    This won t work  Here is my little trick to work this  try title with a space  It will work      lt input type  file  title      gt

User · Answer

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     lt input style  float left    width 88px      color  000000     type  file  id  fileInput  onclick  fileOpen    gt

User · Answer

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   lt input type  file  style  color transparent  width 70px    gt    End of the problem

User · Answer

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  quot color transparent  quot

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to google-chrome