Wie kann ich Schaltflächen zum Hochladen von Dateien ohne JavaScript gestalten?

Schaltflächen zum Hochladen von Dateien ohne JavaScript gestalten

Viele Versuche, Schaltflächen zum Hochladen von Dateien anzupassen, greifen häufig auf JavaScript oder den Ansatz von Quirksmode zurück, der Einschränkungen hinsichtlich der Abmessungen und automatischen Anpassungen aufweist. In diesem Artikel wird eine weniger hackige Lösung unter Verwendung des Tag.

Nutzung des Tag

Das Mit dem Element können wir Schaltflächen zum Hochladen von Dateien ohne JavaScript gestalten. Es leitet Klickereignisse an seine untergeordneten Elemente weiter, sodass wir es als Wrapper für die Schaltfläche zum Hochladen versteckter Dateien verwenden können.

Codebeispiel

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

In diesem Beispiel verstecken wir uns Klicken Sie auf die Schaltfläche zum Hochladen von Dateien mit position:absolute und top:-1000px und formatieren Sie das nach Wunsch markieren. Das Etikett empfängt Klickereignisse und leitet sie an die versteckte Eingabeschaltfläche weiter.

Vorteile dieses Ansatzes

• Ermöglicht eine größere Flexibilität beim Styling im Vergleich zum integrierten Styling des Webkits.
• Es ist kein JavaScript erforderlich, was es effizienter macht.
• Es überwindet die Einschränkungen des Quirksmode-Ansatzes und ermöglicht die Klicken Sie auf die Schaltfläche „Datei“, um den gesamten übergeordneten Container zu füllen.

Das obige ist der detaillierte Inhalt vonWie kann ich Schaltflächen zum Hochladen von Dateien ohne JavaScript gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!