自定义样式 实现文件控件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范围均可以弹出文件框。