Datei Eingabefeld innerhalb der Taste funktioniert nicht in Firefox

Question

Ich hätte gerne eine gestylte Datei input Feld auf meiner Seite und damit in eine button, die es vollständig abdeckt und machte es unsichtbar durch die Einstellung seiner Funktion auf 0.

Dieser Ansatz recht gut in der neuesten Version von Chrome, aber Firefox (und IE) funktioniert nicht den Datei-Dialog öffnen, wenn die Schaltfläche klicken:

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> 

der gleiche Code funktioniert, wenn Ich ersetze das button Element mit einem div, aber ich würde wirklich gerne wissen, ob es eine Möglichkeit gibt, dies mit dem button Tag in den neuesten Versionen von IE (> = 10), FF, Chrome & Edge arbeiten zu lassen.

Answer 1

Eingabeelemente sind in Schaltflächenelementen in HTML nicht zulässig.

Schreiben Sie gültiges HTML, anstatt von einer konsistenten Fehlerkorrektur abhängig zu sein.

Machen Sie die Schaltfläche und Eingabe Geschwisterelemente und positionieren Sie sie dann in einem Container (z. B. ein Div).

Answer 2

Es ist nicht zulässig, einen <input> in einem <button> zu haben. Erwägen Sie es stattdessen in eine <label> oder eine <span> mit einem Click-Handler und geeigneten CSS oder verwenden Sie Anchor-Tags.

Answer 3

Nach W3 specification of the BUTTON tag, können Sie nicht nach innen versetzt die folgenden Tags in einem <button> tag:

• A
• INPUT
• SELECT
• TEXTAREA-
• LABEL
• BUTTON
• FIELDSET

Alle anderen Block- und Inline-Tags sind jedoch zulässig.

Answer 4

Ich bin mir nicht sicher, dass Sie dies tun können, da die W3C spec says Sie nicht interaktiven Inhalt (d. H. Anklickbaren Inhalt) in einer Schaltfläche haben können.

Content-Modell: Inhalt phrasieren, aber kein interaktiver Content-Nachfolger.

Diese Frage zumindest im Zusammenhang ist auch eine possible duplicate of this von denen die Antwort hier akkreditiert ist.

Answer 5

versuchen es

https://jsfiddle.net/DeivissonSedrez/0z6mq5yk/1/

<div class="fakeButton">Upload button 
     <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input> 
</div> 
    <style> 
     .fakeButton{ 
      width: 100px; 
      height: 100px; 
      position: relative; 
      border:1px solid #000; 
      border-radius:3px; 
      text-align:center; 
      font: 15px arial; 
      line-height:90px; 
      box-shadow: inset 0 2px 3px 0 rgba(255,255,255,.3), inset 0 -3px 6px 0 rgba(0,0,0,.2), 0 3px 2px 0 rgba(0,0,0,.2); 
      background-image: -webkit-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: -moz-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: -o-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: linear-gradient(#EEEEEE, #D8D8D8 130%); 
     } 
    </style> 

ich den Eingang in ein div legen und ein div aussehen wie ein Button mit CSS

Sie arbeiteten gemacht in meinen Tests auf IE, FF und Chrome

Ich hoffe es hilft