suamikim suamikim - 1 year ago 195
CSS Question

File input field inside button doesn't work in Firefox

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