文件的上傳按鈕，然後在IE

我已經建立了按照以下格式看起來像典型的HTML按鈕的上傳按鈕，而不是瀏覽器標準的文件上傳表單奇文本光標的行爲。該方法是設計一個錨點元素並在頂部覆蓋一個透明的文件輸入元素。文件的上傳按鈕，然後在IE

這種方法適用於所有瀏覽器，但IE。在IE中，當用戶點擊上傳按鈕時，出現文本光標，就好像用戶點擊了文本輸入框一樣。用戶可以通過雙擊按鈕來觸發文件上傳對話框。但這不是我們想要或任何人期望的行爲。

我不知道爲什麼會發生這種情況。我已經成立了一個展示的jsfiddle這裏的問題： http://jsfiddle.net/davelee/yfSmc/3/

來源

2012-05-17 Dave Lee

您正在測試什麼版本的IE？ – Spudley

這是因爲'」'是與瀏覽器不同的瀏覽器。當你嘗試把東西放在它上面時，你實際上是在點擊文本字段 –

這發生在IE8和IE9中。 –

設置文件輸入元素的寬度和高度，修復了雙方IE8和IE9的問題。

http://jsfiddle.net/davelee/yfSmc/4/

來源

2012-05-18 16:05:42

我已經添加到你的小提琴document.getElementById（'fileUpload'）。焦點（）;並且光標在IE上可見。 – Giedrius

嘗試添加CSS

的z-index

你的絕對要素。

最低元件

z-index:1

最高

z-index:2;

，並設置在容器元件上的z索引。

來源

2012-05-17 22:30:18

我剛工作就這一確切的問題。使用IE瀏覽器，是的，按鈕左側有一個小區域用作文本輸入（用於手動輸入文件名）。我想到的解決方案是增加輸入字段的字體大小。奇怪的是，我知道，但通過增加字體大小，您可以增加其輸入字段的「瀏覽...」按鈕部分，因此可以增加可點擊區域並推出其上傳按鈕的文本部分。由於按鈕是透明的，無論如何，沒有人是明智:)

來源

2013-04-05 20:01:12

謝謝，這就是我所需要的一切，完美！ – Elise

以一個外層div於該輸入文件應用過流隱藏和寬度，然後對輸入文件應用一些CSS像：字體大小，與容限否定。

<div class="outerWrap"> 
    <input type="file" id="fileUpload"/> 
</div>

和CSS將是：

.outerWrap { 
    width: 200px; 
    height: 50px; 
    overflow: hidden; 
} 
#fileUpload { 
    width: 210px; 
    height: 50px; 
    margin-left: -10px; 
    font-size: 70px; 
}

調整寬度和利潤率左根據您的要求。

參考了此鏈接：http://jsfiddle.net/TrdJ8/ 和嘗試在IE-9

來源

2014-06-02 13:57:50 user3519851

滿足IE11這個bug，與字體大小修正：0;

來源

2016-04-18 12:24:22 Experimenter

文件的上傳按鈕，然後在IE

回答

相關問題