Safari 在输入文件元素中显示图像

Question

我有一个文件上传元素

<input type="file">

当我选择文件时，大多数浏览器（即 Chrome 和 FF）都会显示图像名称。然而 Safari 却显示了一个很小的缩略图。糟糕的野生动物园！

我的最终目标是使用 psudo 元素创建一个自定义上传按钮，该目标适用于除 Safari 之外的所有地方。选择图像后，按钮中央会显示一个小缩略图，我似乎无法删除它。

把问题归结为：

苹果浏览器：

其他所有人：

添加 font-size: 0; 后的目标：

总结一下，这是我试图阻止的最终产品：

Answer 1

您可以尝试将字体大小设置为 0，而不是visibility: hidden;

我假设您的“选择图像”按钮不是输入元素的一部分，因此它仍然应该显示。

input[type="file"] {
  visibility: hidden;
}