Trigger the file input prompt with a hidden label element - Safari

Question

I have the code:

<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;" />

If I leave display:none; on-click nothing happens. If I change it to visibility:hidden;, the code works but the space occupied by the element remains. What to should I do ?

Answer 1

Modern browsers will trigger the file input element to open even when the element is hidden with display: none; but as you have noticed, this doesn't work in Safari. In addition it also doesn't work in IE8 and below.

As a workaround, here are two alternative solutions that should work in all cases.

The easiest option would be to set the positioning of the element to fixed and then position it off the screen using a combination of right: 100%/bottom: 100%.

Example Here

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

You could also use the CSS that is commonly used to visually hide content but allow it to remain visible for screen readers:

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;
}

Both of these options effectively hide the input element without usage of display: none.