CSS修改upload介面

最近因為工作的關係，幾乎把所有input的樣式修改都練了一遍，其中最麻煩的是修改upload的樣式，因為upload的樣式在各家瀏覽器長的都不一樣。



而且基本上css也沒辦法直接定義upload的樣式，所以就需要使用別的方法來處理。

簡單的說要先準備一個text跟一個button，這個樣式可以修成我們想要的樣子。



之後準備一個upload的元件，然後讓他跟上面的text跟button重疊，並把透明度設為0。
IE:filter:alpha(opacity=0); , 其它:opacity:0;
重疊的話就使用position吧。

之後雖然是點假的text欄位，卻會出現upload選取檔案的視窗。

最後再用javascript把upload的值傳到text就可以了。
function setText(ob,name){
document.getElementById(name).value=ob.value;;
}
在upload使用
onchange="setText(this,'id');"
參考資料