suamikim suamikim - 3 years ago 237
CSS Question

File input field inside button doesn't work in Firefox

I'd like to have a styled file

field on my page and therefore put it inside a
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:

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

The same code works if I replace the
element with a
but I'd really like to know if there is a way to make this work with the
tag in the latest versions of IE (>= 10), FF, Chrome & Edge.

Answer Source

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download