CSS修改upload介面

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

228519_1924209034719_4395893_n

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

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

215988_1924208954717_5758102_n

之後準備一個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');"
參考資料

留言