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.
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.
Top comments (4)
This is a good solution; the problem is the file uploaded name doesn't show up when uploaded
Thank you @sadnessojisan for coming up with this article.
What if i use a button in the label tag and hide the input tag. It'll do the same I think!
How about it, guys :D
input[type="file"] {
width:100px;
overflow: hidden;
}