关于 input type=file 样式兼容的一个小技巧

标签： 前端

大家都知道各浏览器对文件上传输入框的表现形式不一，如下图：

文件上传输入框

前几天发现好多同学在项目中的做法都是将input type=file的opacity设置为0，然后加一个浮层，用于改变输入框的样式。

那么问题来了！

宝宝们都忽略了在旧版本Firefox，Opera浏览器以及IE9以下，文件输入框的形式是一条长长的输入框，带一个按钮，所以就会造成按钮的单击区域只有后半段，前半段只有双击才能实现文件上传。

解决方案

给文件上传框设置一个很大很大的字号，于是在旧版本浏览器下就只能点到按钮啦！

.uploadFile {
    opacity: 0;
    filter: alpha(opacity:0);
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 999px; //设置一个很大很大的字号，让右侧按钮撑开
    overflow: hidden; // 把超出部分隐藏
}

项目中：前台“上传logo”，后台各种码上传图片，上传音视频按钮都存在此类现象。
各位有空看到可以改一下。

作者 @郑小明
2016 年 08 月 16 日