Html 是否可以设置文件输入类型的样式，使其仍然允许拖放？

下面显示了输入按钮的样式，因此单击它将打开文件资源管理器。你能有一个类似的按钮，它可以像常规输入一样支持拖放功能吗

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

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

input[type=“file”]{
显示：无；
}
.自定义文件上载{
边框：1px实心#ccc；
显示：内联块；
填充：6px 12px；
光标：指针；
}
自定义上载

是的，在您的示例中，您将实际输入的

显示

属性设置为

无

，从而消除了拖放的常规行为

我认为在这个示例中，使用CSS和HTML最好的方法是将不透明度设置为0，并将文件输入覆盖在自定义按钮的顶部，但这有点俗气，如果您想扩展jQuery并实际显示正在上载的文件等等，我建议您使用一些聪明的jQuery

小提琴：

input[type=“file”]{
显示：内联块；
不透明度：0；
位置：相对位置；
顶部：-18px；
}
.自定义文件上载{
边框：1px实心#ccc；
文本对齐：居中；
显示：内联块；
填充：6px 12px；
光标：指针；
宽度：140px；
高度：25px；
}

自定义上载