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

时间:2019-10-08 14:31:58

标签: html css

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

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

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

我想知道是否可以完全删除该标签,所以只剩下一个按钮了?

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

1 个答案:

答案 0 :(得分:3)

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

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