如何不显示HTML5输入的文件名

Question

我正在做前端工作，我想分开这个文件类型输入的两个组件，我想'选择文件'在一行和'没有文件'选择上另一个，或者根本不显示“未选择文件”（包括为输入选择文件后）。

Answer 1

你可以做一个简单的技巧使用CSS来隐藏输入和视图只是一个标签

<label for="file-upload" class="custom-file-upload"> 
    <i class="fa fa-cloud-upload"></i> choose File 
</label> 
<input id="file-upload" type="file"/> 

input[type="file"] { 
    display: none; 
} 
.custom-file-upload { 
    border: 1px solid #ccc; 
    display: inline-block; 
    padding: 6px 12px; 
    cursor: pointer; 
} 

这里提琴看到的结果HERE

Answer 2

得到的结果文件输入是随浏览按钮和选定文件名一起提供的元素，您无法更改某些部分，因为它是巨型的。但您可以隐藏整个文件名元素并显示您自己的自定义浏览按钮。