html - 删除 <input type ="file"> 旁边的标签

Question

我有一个 <input type="file"> :

<input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">

如果未选择任何文件，则标签会显示“未选择任何文件”。对于单个选定文件，其旁边的标签会显示文件名。如果选择了多个文件，它会显示“选择了n 个文件。”

我想知道我是否可以完全删除该标签，以便只剩下按钮？

请注意，我所说的标签在 DOM 中不可见。

Answer 1

将输入放在标签元素内，隐藏输入，并设置标签样式:

.file-upload {
  border: 1px solid black;
  border-radius: 3px;
  padding: 3px;
}

.file-upload input {
  overflow: hidden;
  width: 0;
}

<label class="file-upload">
  <input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">
  Choose Files
</label>