DEV Community

sadnessOjisan
sadnessOjisan

Posted on

Hide "No file chosen" of input elements (type="file")

#html #webdev #css

If you create file input elements, 

 <input type="file" />
Enter fullscreen mode Exit fullscreen mode

you will see

Screen Shot 2021-02-03 at 5.13.01

This "No file chosen" is sometimes bothering for design. Let's hide it.

Needs Dom manipulation?

If you investigate how to hide this, you will find a solution using jQuery.

FYI: https://stackoverflow.com/questions/12035400/how-can-i-remove-the-no-file-chosen-tooltip-from-a-file-input-in-chrome

 input[type='file'] { opacity:0 }
Enter fullscreen mode Exit fullscreen mode 
 <div> <input type='file'/> <span id='val'></span> <span id='button'>Select File</span> </div>
Enter fullscreen mode Exit fullscreen mode 
 $('#button').click(function(){ $("input[type='file']").trigger('click'); }) $("input[type='file']").change(function(){ $('#val').text(this.value.replace(/C:\\fakepath\\/i, '')) })
Enter fullscreen mode Exit fullscreen mode

But If you use React, Vue, and so on, How do you do it? The simple solution is just to use CSS.

 input[type='file'] { color: rgba(0, 0, 0, 0) }
Enter fullscreen mode Exit fullscreen mode

The point is, not to use opacity but use color. If you use opacity, the input button also disappears.

Screen Shot 2021-02-03 at 5.27.11

Those are examples.

Top comments (4)

Collapse
 
maruffahmed profile image
Maruf Ahmed • • Edited

What if i use a button in the label tag and hide the input tag. It'll do the same I think!

Collapse
 
samspecial profile image
Samuel Osinloye •

Thank you @sadnessojisan for coming up with this article.

Collapse
 
adeleke5140 profile image
Kehinde Adeleke •

This is a good solution; the problem is the file uploaded name doesn't show up when uploaded

Collapse
 
hoangnh profile image
Nguyễn Hữu Hoàng •

How about it, guys :D
input[type="file"] {
width:100px;
overflow: hidden;
}
Image description