输入类型文件隐藏不起作用

我想自定义我的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

输入类型文件隐藏不起作用

回答

相关问题