File input field inside button doesn't work in Firefox

Question

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.

Answer 1

Input elements are not allowed inside button elements in HTML.

Write valid HTML instead of depending on consistent error recovery.

Make the button and input sibling elements and then position them within a container (such as a div).