自定義樣式 實現文件控件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范圍都可以彈出文件框。