input type="file" is not working in Firefox when surrounded with a button

Question

If I do this:

<input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer;" />

Everything works great across all browsers.

If I do this:

<button class="success expand radius">
    <span id="save_image_titlebar_logo_live">Upload image</span>
    <input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0" />
</button>

Everything works great across all browsers except Firefox. When I click the button, the file dialog doesn't show up.

Any ideas? Is there a workaround?

(I'm using Foundation and Backbone as well, if that is an issue, but this seems to be unrelated to those frameworks)

Answer 1

Try using a div with a "button" class assigned instead of an actual button for this as the button is just for styling it seems...

<div class="button success expand radius">
    <span id="save_image_titlebar_logo_live">Upload image</span>
    <input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0" />
</div>