Input type="file" не работает в Firefox, когда он окружен кнопкой

Если я это сделаю:

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

Все работает отлично во всех браузерах.

Если я это сделаю:

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

Все работает отлично во всех браузерах, кроме Firefox. Когда я нажимаю кнопку, диалоговое окно файла не отображается.

Любые идеи? Есть ли способ обхода?

(Я использую Foundation и Backbone, если это проблема, но это, похоже, не связано с этими фреймами)

Ответ 1

Попробуйте использовать div с классом "button", назначенным вместо фактической кнопки для этого, поскольку кнопка только для стилизации кажется...

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