input type = „file“ funktioniert nicht in Firefox, wenn sie mit einem Knopf

Question

umgeben Wenn ich dies tun:

<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;" /> 

Alles funktioniert in allen Browsern groß.

Wenn ich dies tun:

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

Alles funktioniert gut in allen Browsern außer Firefox. Wenn ich auf die Schaltfläche klicke, wird der Dateidialog nicht angezeigt.

Irgendwelche Ideen? Gibt es eine Problemumgehung?

(Ich verwende Foundation und Backbone als auch, wenn das ein Problem ist, aber dies scheint auf diese Rahmenbedingungen nicht verwandt zu sein)

Answer 1

Versuchen Sie, ein div mit einem „Knopf“ Klasse anstelle eines tatsächlichen zugewiesen Taste dafür, wie die Taste ist nur für das Styling scheint es ...

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