使用隐藏标签元素触发文件输入提示 - Safari
Trigger the file input prompt with a hidden label element - Safari
我有代码:
<label name="xs" id="xs" for="fileselect">
<p class="add_atach">Test</p>
</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" style="display:none;" />
如果我离开display:none;
点击什么都不会发生。如果我将它更改为 visibility:hidden;
,代码可以工作,但元素占用的 space 仍然存在。我该怎么办?
现代浏览器将触发文件 input
元素打开,即使该元素被 display: none
隐藏;但正如您所注意到的,这在 Safari 中不起作用。另外在IE8及以下版本也不行。
作为变通方法,这里有 two alternative 应对所有情况的解决方案。
最简单的选择是将元素的定位设置为 fixed
,然后使用 right: 100%
/bottom: 100%
.[=23= 的组合将其定位在屏幕之外]
input[type="file"] {
position: fixed;
right: 100%;
bottom: 100%;
}
您也可以使用 CSS,即 commonly used to visually hide content,但允许它对屏幕阅读器保持可见:
input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
这两个选项都有效地隐藏了 input
元素而不使用 display: none
。
我有代码:
<label name="xs" id="xs" for="fileselect">
<p class="add_atach">Test</p>
</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" style="display:none;" />
如果我离开display:none;
点击什么都不会发生。如果我将它更改为 visibility:hidden;
,代码可以工作,但元素占用的 space 仍然存在。我该怎么办?
现代浏览器将触发文件 input
元素打开,即使该元素被 display: none
隐藏;但正如您所注意到的,这在 Safari 中不起作用。另外在IE8及以下版本也不行。
作为变通方法,这里有 two alternative 应对所有情况的解决方案。
最简单的选择是将元素的定位设置为 fixed
,然后使用 right: 100%
/bottom: 100%
.[=23= 的组合将其定位在屏幕之外]
input[type="file"] {
position: fixed;
right: 100%;
bottom: 100%;
}
您也可以使用 CSS,即 commonly used to visually hide content,但允许它对屏幕阅读器保持可见:
input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
这两个选项都有效地隐藏了 input
元素而不使用 display: none
。