在Firefox中調整輸入類型=「文件」瀏覽按鈕？

Question

是否有無論如何使用CSS或JS，你可以調整輸入類型=「文件」在Firefox瀏覽按鈕？

我知道你不能更改按鈕的文本，但我需要做的就是讓這個按鈕更寬的Firefox。所以使用-moz css規則將是完美的。

Answer 1

由於安全原因，樣式文件輸入按鈕非常有限。有一些解決方法，但沒有一個是完美的。看看這個職位上怪異模式：

http://www.quirksmode.org/dom/inputfile.html

Answer 2

編輯：正如其他人指出Firefox不suuport下面的方法我會參考以下鏈接http://www.quirksmode.org/dom/inputfile.html

下面是一個非常簡單的解決方案。我會建議添加一個類到標籤雖然。基本上，你的風格標籤，而不是輸入的避免了跨瀏覽器的問題，寬度和高度的錯誤：

<label> 
    <input type=file> 
</label> 

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

什麼時，他們需要一個「定製化」的網站經常做文件上傳小部件：隱藏「真實」文件上傳字段。添加一個文本字段，該字段將顯示文件上傳字段的當前值以及一個將在文件上傳字段中觸發文件選擇的按鈕。下面一個例子：

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

這裏是主要的想法：http://www.quirksmode.org/dom/inputfile.html

，這可能是有益的調整輸入區域

input{font-size: 100px;} 

工作正常，我。

Answer 5

至於我，振亞舍甫琴科給了最好的工作解決方案之一。用他的方法，我們可以創建跨瀏覽器的文件輸入按鈕：http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

試試這個：http://jsfiddle.net/CnHj5/ 在Firefox和一個不錯的指針光標是可用的。

HTML：

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

CSS：

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}