input file 上傳文件 樣式修改

轉自：http://www.mangguo.org/custom-input-file-style-ie-compatible/

首先，給 <input type="file"> 元素戴個套子，這樣比較安全嘛，是不是？看代碼：

<span class="input-file">瀏覽...<input type="file"></span>

有了這個安全的外層容器，我們就可以開搞了。問題的核心有兩點：第一，把醜陋的原生上傳控件給藏起來；第二，支持點擊上傳功能。

關鍵的代碼片段：

.input-file {
overflow:hidden;
position:relative;
}

.input-file input{
opacity:0;
filter:alpha(opacity=0);
font-size:100px;
position:absolute;
top:0;
right:0;
}

其中，字體大小 100px 的原因在於放大上傳控件右側的按鈕區域，結合靠右定位，能夠保證鼠標 cursor 爲 default 狀態。

另外，如果要支持鼠標懸停效果，也是可以的，把 span 標籤改成 a 標籤，然後加上 hover 僞類就可以了。

<a href="javascript:void(0);">瀏覽...<input type="file"></a>