自定义样式 实现文件控件input[type='file']

一般我们设计的上传按钮都是和整个页面风格相似的样式，不会使用html原生态的上传按钮，但是怎么既自定义自己的样式，又能使用file控件功能呢？



思路是这样的：

1.定义一个相对定位的DIV，按照整成步骤实现自己的结构和样式；

2.在DIV里添加<input type="file" class="my-file">

3.将file控件绝对定位，宽度和高度全部覆盖掉父元素，并且设置透明度为0.

实现代码如下：

.my-file {
cursor: pointer;
　　 position: absolute;
　　 top: 0;
　　 left: 0;
　　 width: 100%;
　　 height: 100%;
opacity: 0;
filter: alpha(opacity=0);
font-size: 120px;
}

大致工作基本完成，但是这里有在IE8里有一个小问题，这里就是为什么要给file加一个 font-size: 120px 的原因。



这是控件的原生样式，chrome里点击没问题，但是在IE8里，点击范围只有浏览按钮那个区域



设置字体大小后，人为的扩大了按钮的点击范围，所以这时候点击整个DIV范围都可以弹出文件框。