gpt4 book ai didi

html - 使用隐藏的标签元素触发文件输入提示 - Safari

转载 作者:行者123 更新时间:2023-12-03 21:34:07 35 4
gpt4 key购买 nike

我有代码:

<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;单击没有任何 react 。如果我把它改成 visibility:hidden; ,代码有效,但元素占用的空间仍然存在。我该怎么办?

最佳答案

现代浏览器会触发文件 input即使元素被 display: none 隐藏,元素也会打开;但正如您所注意到的,这在 Safari 中不起作用。此外,它也不适用于 IE8 及以下。

作为解决方法,这里是 two alternative应该适用于所有情况的解决方案。

最简单的选择是将元素的定位设置为 fixed然后使用 right: 100% 的组合将其放置在屏幕外/bottom: 100% .

Example Here

input[type="file"] {
position: fixed;
right: 100%;
bottom: 100%;
}

您也可以使用 CSS commonly used to visually hide content但允许它对屏幕阅读器保持可见:

Example Here
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 的元素.

关于html - 使用隐藏的标签元素触发文件输入提示 - Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28721679/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com