在所有瀏覽器中設置統一的<input type =「file」>寬度

Question

CSS或屬性需要什麼組合？

Answer 1

• 隱藏實際控制
• 製造與控制一個DIV和造型你想在它

頂部的按鈕是不是一個標準的HTML控件。

請參見：http://www.quirksmode.org/dom/inputfile.html

Answer 2

有什麼錯

<input type="file" size="50" .... /> 

？ 將目光相同，除了在Mac上我猜野生動物園（在Mac上，所有上傳控件看起來不一樣，對所有的瀏覽器）

Answer 3

除了怪異模式教程，這裏是另一個很好的資源： http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

如果你隱藏實際控件，請記住將控件的不透明度設置爲零非常重要，而不是實際使用visibility: hidden。這樣做會實際隱藏元素，禁用點擊操作。另外，如果你用一個圖形按鈕來掩蓋控件，請注意，在某些瀏覽器（Firefox和IE，我相信）中，當它是一個遊標時，你將無法將遊標類型改爲手覆蓋文件控件的文本輸入部分（它始終默認爲輸入或常規非鏈接指針）。是的，我試過使用cursor: pointer（和cursor: hand）。個人而言，我一直在爲自定義上傳框付出艱辛的努力，而且沒有銀彈讓他們的外觀或定製完美無缺。 （特別是關於遊標的行爲，因爲我認爲這是一個UI交易斷路器）。在一天結束時，我認爲接受不同的瀏覽器會以不同的方式呈現控件更容易，而這正是它的原因。