自定义文件上传控件在Safari浏览器无法正常触发问题求助

我之前也踩过Safari这个坑！问题出在你用hidden="hidden"属性完全隐藏了file input——Safari会把这类被标记为隐藏的元素判定为不可交互，所以点击label的时候没法触发它的文件选择弹窗。

这里给你几个靠谱的解决办法，按兼容性优先级排序：

方法1：用CSS移出可视区域（推荐） #

把hidden属性去掉，改用CSS把input移到屏幕外，这样它在DOM里保持可交互状态，但用户完全看不到。修改后的代码如下：

<form enctype="multipart/form-data" class="setting_profile_upload_pspandhe" >
  <input type="file" name="clientphotoouplod" id="uploadtheclientfilephoto86849LJLG" onchange="change_profile()" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px;" />
  <label for="uploadtheclientfilephoto86849LJLG" id="Aa482018505Aa_" >Upload Profile</label>
</form>

这是前端社区处理自定义上传控件的标准方案，所有浏览器（包括Safari）都能稳定工作。

方法2：用透明化+尺寸压缩（备选） #

如果不想用定位，也可以把input设为完全透明，同时压缩尺寸避免占用页面空间：

<input type="file" name="clientphotoouplod" id="uploadtheclientfilephoto86849LJLG" onchange="change_profile()" style="opacity:0; width:0; height:0; overflow:hidden;" />

这种方式同样能保留input的可交互性，只是视觉上完全不可见。

为什么原来的方法失效？ #

Safari的交互逻辑有个特殊点：hidden属性或者display:none的元素会被排除在可交互元素列表之外，哪怕label通过for属性和它绑定，也触发不了点击事件。而上面两种CSS隐藏方式，只是让元素不可见，并没有改变它的可交互状态，所以能正常触发文件选择弹窗。

你可以先试试第一种方法，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者ashwell