如何摆脱 <input type=file> 的文件文本？ [复制]

【问题标题】：How to get rid of file text for <input type=file>? [duplicate]如何摆脱 <input type=file> 的文件文本？ [复制]
【发布时间】：2021-08-30 20:36:13
【问题描述】：

当您使用它时，它会创建一个按钮，旁边有一些文字，上面写着“未选择文件”。或“未选择文件”。

如何删除？

【问题讨论】：

标签： html css

【解决方案1】：

你必须为输入创建一个标签。

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>

或者您可以使用纯 CSS 解决方案：

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>

【讨论】：