改變上傳檔案樣式

標籤：style   io   os   sp   java   檔案   on   問題   代碼   

首先，給 <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>

貌似是全相容的？反正 IE 是可以的。自己看吧，懶得看相容了。

改變上傳檔案樣式