Trigger the file input prompt with a hidden label element - Safari
css, html, label
Solution
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`.
Problem
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 ?