輸入類型文件隱藏不起作用

我想自定義我的input type file按鈕。爲此，我已將其放入span並將其visibility設置爲hidden。輸入類型文件隱藏不起作用

 <span class="btn btn-default" flow-btn> 
     Please choose a file 
     <input type="file"style="visibility: hidden; position: absolute;"></span>

我的問題是，當我點擊跨度，沒有發生，但是當我從style刪除visibility: hidden，然後選擇顯示文件彈出。

即使隱藏了，我如何獲得與input type="file"相同的結果？

<span class="btn btn-default" flow-btn> 
 
     Please choose a file 
 
     <input type="file"style="visibility: hidden; position: absolute;"></span>

來源

2017-04-24 Ne AS

這似乎是一個更好的方式來完成你想要什麼，自定義選擇文件按鈕的外觀：http://stackoverflow.com/a/5813384/7852370 –

^爲什麼不做這個傢伙說:) – Noobit

使用的<label>而不是<span>用「爲」靶向屬性的<input>。

<label for="file-input" class="btn btn-default" flow-btn> 
    Please choose a file 
    <input id="file-input" type="file"style="visibility: hidden; position: absolute;"></label>

來源

2017-04-24 13:54:18 Pointy

在這種情況下將工作，因爲它被包裹 – epascarello

@epascarello我'因爲老版本的IE沒有做到這一點。 – Pointy

哇謝謝sooo多！ –

做角方式：

<span class="btn btn-default" flow-btn (click)="fInput.click()">Please choose a file</span> 
<input #fInput type="file"style="visibility: hidden; position: absolute;" (change)="onFilesAdded($event)">

創建一個本地模板變量你叫fInput
隱藏輸入click -event添加到您的跨度，然後點擊你隱藏的輸入
add change -event添加到您的文件輸入以處理模板中的文件

來源

2017-04-24 13:54:50 mxii

-3

<span class="btn btn-default" flow-btn> 
     Please choose a file 
     <input type="file"style="display: none;"></span>

設置顯示爲none（其中隱藏它，並沒有預留空間吧）你不需要任何定位

來源

2017-04-24 13:54:50

輸入類型文件隱藏不起作用

回答

相關問題