如何在Firefox中設置文件輸入字段？

我目前正在做一個網站的前端，其形式爲looooads，所有風格都很漂亮，但在IE中我注意到，在Firefox中，文件輸入字段沒有響應我的任何樣式，全部其他類型的輸入字段都很好。我已經在Firebug中檢查過它，並將正確的樣式關聯到它，但不會改變它的外觀。如何在Firefox中設置文件輸入字段？

如果這不是一個完整的代表我的大腦放屁，那麼這是Firefox中的一個已知問題嗎？如果是這樣，我怎麼從未注意到它？

以下是代碼示例。

CSS：

form.CollateralForm input, 
form.CollateralForm textarea 
{ 
    width:300px; 
    font-size:1em; 
    border: solid 1px #979797; 
    font-family: Verdana, Helvetica, Sans-Serif; 
}

HTML：

<form method="bla" action="blah" class="CollateralForm"> 
    <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" /> 
</form>

我也嘗試應用類，但不工作的。 CSS類的屬性的

來源

2008-12-09 Wayne Austin

這個問題是重複的。請參閱：[http://stackoverflow.com/questions/269582/setting-uniform-input-typefile-width-in-all-browsers#269602](http://stackoverflow.com/questions/269582/setting-uniform- input-typefile-width-in-all-browsers＃269602） – 2008-12-09 14:07:01

-4

使用金手指（＃）盈說：

form.CollateralForm input, 
form.CollateralForm textarea 
{ 
    width:300px; //for firefox 
    #width:200px; //for IE7 
    _width:100px; //for IE6 
    font-size:1em; 
    border: solid 1px #979797; 
    font-family: Verdana, Helvetica, Sans-Serif; 
}

來源

2008-12-09 11:52:20 Samiksha

實際上，下劃線黑客是針對IE6的。 – 2008-12-09 12:01:02

我不明白這將如何幫助，問題是與Firefox沒有響應任何樣式的文件輸入字段，它不像它的跨瀏覽器造型問題 – 2008-12-09 12:46:17

這個答案對此有何幫助？ – jordanstephens 2011-05-06 15:41:01

火狐可以使用HTML輸入尺寸屬性被黑客攻擊：大小=「40」同時使用的CSS寬度以控制佈局中的字段+按鈕的全部寬度

來源

2012-08-08 18:51:47 ppostma1

上面的許多答案都很古老。 在2013年更簡單的解決存在：幾乎所有當前的瀏覽器...

鉻
IE
Safari瀏覽器
火狐幾行修復

穿過點擊標籤中的事件。試試這裏：http://jsfiddle.net/rvCBX/7/

風格<label>然而，你想你的文件上傳是。
在標籤上設置for="someid"屬性
創建一個<input id="someid">元素，這是隱藏的。

點擊標籤會將事件傳遞給Chrome，IE和Safari中的文件上傳。

Firefox requires a very small workaround, which is detailed in this answer。

來源

2013-01-30 13:47:57 mikemaccana

Customformsjs插件在其文件模塊類上解決此問題。
http://customformsjs.com/doc/File.html

http://customformsjs.com/doc/File.js.html

Basicaly使其能夠善待有一些限制樣式文件輸入字段。它通過將其包裝在容器中並使其透明，以便點擊它。演示頁面顯示了它在行動

來源

2013-06-11 02:23:57

比方說，你有你的輸入：

<input style="display:none" id="js-choose-file" type="file">

創建使用jQuery假的按鈕。

<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>

以任何你喜歡的方式設置上述按鈕。那麼：

$("#js-choose-computer").on("click", function() { 
    $("#js-choose-file").click(); 
    return false; 
});

來源

2014-07-17 10:13:14

如何在Firefox中設置文件輸入字段？

回答

相關問題