title: File input field inside button doesn't work in Firefox
body: <p>I'd like to have a styled file <code>input</code> field on my page and therefore put it inside a <code>button</code> which it completely covers and made it invisible by setting its opactiy to 0.</p>
  
  <p>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:</p>
  
  <p><a href="http://jsfiddle.net/ch8xxvez/3/" rel="noreferrer">http://jsfiddle.net/ch8xxvez/3/</a></p>
  
  <pre><code>&lt;button style="width: 100px; height: 100px; position: relative;"&gt;Upload button
      &lt;input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"&gt;&lt;/input&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>The same code works if I replace the <code>button</code> element with a <code>div</code> but I'd really like to know if there is a way to make this work with the <code>button</code> tag in the latest versions of IE (>= 10), FF, Chrome &amp; Edge.</p>