删除<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>