Html 有没有办法将默认的“选择文件”图标替换为输入字段的自定义图像背景？

由于我有一个PWA，我只能找到使用输入字段上传图像的教程。该部分正在工作，但我正在尝试用自定义图像替换默认的“选择文件”图标

这是我的一张照片：

我根本不希望“选择文件”图像出现。此外，还有一个默认措辞“未选择文件”。我只想要背景中的图像，但我还没有在网上找到任何东西来显示如何替换它

。输入图片{
背景图片：url（“../../../assets/image/SpaghettiPlus2.png”）！重要；
背景重复：无重复；
}

---

可以使用样式设置“选择”按钮的样式，但是，您无法使用此解决方案对

未选择文件的文本执行任何操作

嗯，您可以通过将
颜色
设置为
透明
，但这并不完美


#浏览：：文件选择器按钮{
显示：无；
}
#浏览{
颜色：透明；
}
#浏览：：之前{
内容：url（'https://via.placeholder.com/150');
}
只需将图像上的点击重定向到输入，并完全隐藏输入：


document.querySelector（“img”）.onclick=（evt）=>{
document.querySelector（“输入”）。单击（）；
};
input{display:none；}
img{cursor:pointer；}

为什么不在图像中添加一个单击侦听器，然后加载并触发操作呢。我不知道这是否有角度，但这很容易做到。@nck此输入字段正在将图像上载到firebase后端。这是我知道如何在PWA上执行此操作的唯一方法。因此，当你点击它时，你可以在你的设备上搜索图像，然后上传。实际图标上的单击事件不提供此功能。