DEV Community

loading...

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

sadnessOjisan
(p)react / Node.js engineer
・1 min read

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.

Discussion (1)

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!