What is the best way to remove file text from an <input type=file> element?

Question

By utilizing this feature, a button is generated alongside text that reads either "No file selected." or "No file chosen".

What steps should be taken to eliminate this?

Answer 1

Answer №1

To proceed, you need to establish a label for the input field.

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>

Alternatively, you can opt for a CSS-only method:

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>

Answer 2

To proceed, you need to establish a label for the input field.

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>

Alternatively, you can opt for a CSS-only method:

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>