怎麼修改 HTML 中上傳選擇框（input file）的樣式，以達到同時解決 FireFox 下遮蓋其他元素問題，以及中英文等不同語言下右邊按鈕寬度不同導致影響布局問題？

還是這個經典的老問題 各種在網上沒有找到完美的解決方案 因此小弟只好厚著臉皮來向各位大牛提問

大多數瀏覽器 只能改 input file 的邊框 背景， 那個右邊的按鈕都無法修改

更有甚者在FF中 &< input type="file"/ &> 的寬度都不能設置

有解決方法 利用z-index 或者 透明度=0 來弄（但比如FF下卻有問題）

也有利用 onclick事件來觸發input file的click() 來模擬點擊（但比如Opera不支持）

但是都不能兼容所有瀏覽器...

所以，請教了~~ 期待牛人的足跡 0.0

ps.還有火狐的input透明方法下 該input會擠出去覆蓋周圍的其他元素，導致周圍元素點擊後也是相當於點擊了這個input file，無論設置z-index為多少，寬度多少，高度多少，邊距多少，縮進多少等等等...這個透明Input file永遠置頂... 而且遮蓋周圍元素...=。=

pps.設置input的size屬性雖然可以解決寬度和FF遮蓋周圍元素問題，但中文、英文下，input file右邊的那個按鈕的寬度明顯不同，中文是「瀏覽...」，英文是"Browse..." 粗略估計寬度比中文寬0.5倍... 這樣又影響到布局了... =。=

---

1. 放置兩個層，設置 input[type=file] 為透明

2. 把 input[type=file] 放置於另一個層（外觀）上，做一個假象

難點：ie下字體的問題。可以 copy 代碼自己在 ie 上試試。

Demo地址：http://jsfiddle.net/HMVTF/

---

普遍做法：

1. 將input設置為透明

2. 將一個圖片放在input的下面。

這樣，你看見的只是圖片，但是當你點擊時，響應的其實是這個input。

---

簡單優雅，有效的方式，但兼容不全面。無需 JavaScript 和 CSS hack - Demo

&
&
test
&


bootstrap 的 file 組件，繁瑣，但兼容全面。 - Demo

&
&
&
&Browse&
&

$("input[id=lefile]").change(function() {
$("#photoCover").val($(this).val());
});


---

label for 布局

input file 隱藏

---

正好前陣子寫過這個教程，關於文件上傳控制項的樣式自定義：

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

---

右邊按鈕的寬度可以用font-size，設置了寬度的情況下，並不會影響到周邊。

---

透明的方法用過沒問題呀

如果能容忍flash的話可以考慮 http://www.uploadify.com/ 之類的

---

可以看看 plupload 的代碼，其實多數情況下我都基於這個做上傳了，很方便。

---

推薦閱讀：