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