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)