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

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

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

如果未选择文件，则标签显示“未选择文件”。如果是单个选定文件，则其旁边的标签将显示文件名。如果选择了多个文件，则会显示“已选择n个文件”。

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

请注意，我正在谈论的标签在DOM中不可见。

最佳答案

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

.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>

关于html - 删除<input type =“file”>旁边的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58288495/