javascript - 我的休假申请表中的回形针选项用于附加文件

Question

我想给出一个选项

<input id="file" name="file" type="file" />

 

用于上传图像、pdf、文档等文件的回形针...就像我们在 Gmail 和 WhatsApp 中附加的方式一样，就像我想在休假申请表中提供的选项

我想要像这样的回形针选项，而不是选择文件 paper clip option

Answer 1

使用 font Awesome 检查下面的代码片段。

.fa {
 font-size: 40px!important;
 color: grey;
 cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label for="file">
 <i class="fa fa-paperclip"></i>
</label>
<input id="file" name="file" type="file" multiple hidden />