How to get rid of file text for ?

Question

When you use it creates a button with some text next to it that says "No file selected." or "No file chosen".

How do I remove this?

Answer 1

You have to create a label for the input.

document.querySelector('label').addEventListener('click', ()=>{
  document.querySelector('input').click();
})

input[type="file"]{
display:none;
}

<input type="file" id="input">
<label for="input"><button>Choose File</button></label>

Or you can use a pure CSS solution:

input[type="file"] {
  opacity: 0;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events:none;
}

div{
  position:relative;
}

<div>
<input type="file" id="input">
<label for="input"><button>Choose File</button></label>
</div>