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

If you create file input elements,

<input type="file" />

you will see

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    
}

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

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

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

Those are examples.

Comments

[Kehinde Adeleke]

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

[Samuel Osinloye]

Thank you @sadnessojisan for coming up with this article.

[Maruf Ahmed]

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

[Nguyễn Hữu Hoàng]

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