I'd like to have a styled file input
field on my page and therefore put it inside a button
which it completely covers and made it invisible by setting its opactiy to 0.
This approach works pretty well in the latest version of Chrome but Firefox (and IE) won't open the file dialog when clicking the button:
http://jsfiddle.net/ch8xxvez/3/
<button style="width: 100px; height: 100px; position: relative;">Upload button
<input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input>
</button>
The same code works if I replace the button
element with a div
but I'd really like to know if there is a way to make this work with the button
tag in the latest versions of IE (>= 10), FF, Chrome & Edge.