Question

我有代码：

<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;，则代码可以正常工作，但元素占用的空间仍然存在。我该怎么办？

Answer 1

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

作为一种解决方法，以下是适用于所有情况的two alternative解决方案。

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

Example Here

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

您还可以使用commonly used to visually hide content的CSS，但允许其对屏幕阅读器保持可见：

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。

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

1 个答案: