Wie kann ich das Design der Datei-Upload-Schaltfläche in allen Browsern ohne JavaScript anpassen?

Anpassen des Stils von Datei-Upload-Schaltflächen in allen Browsern

Das Anpassen des Erscheinungsbilds von Datei-Upload-Schaltflächen kann ohne den Rückgriff auf JavaScript eine Herausforderung sein. Es gibt jedoch eine einfache und effektive Technik, die das Label-Tag nutzt, um die gewünschten Ergebnisse zu erzielen.

Mit dem Tag

Das -Tag bietet eine Möglichkeit, einer Formulareingabe eine Textbeschriftung zuzuordnen. Durch das Einschließen einer versteckten Datei-Upload-Eingabe in ein Label können Sie weiterhin Klickereignisse innerhalb des Labels erfassen und sie an die versteckte Eingabe umleiten.

CSS-Styling

Sobald die Da die Datei-Upload-Eingabe ausgeblendet ist, können Sie die umgebende Beschriftung mithilfe von CSS frei gestalten. Der folgende Code zeigt beispielsweise eine benutzerdefinierte Schaltfläche zum Hochladen von Dateien:

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

/***** Example custom styling *****/
.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;
}

HTML-Implementierung

Um diese Technik in HTML zu implementieren:

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

Durch die Verwendung dieses Ansatzes erhalten Sie die vollständige Kontrolle über das Design der Datei-Upload-Schaltfläche, ohne JavaScript und ohne Einschränkungen durch browserdefinierte Eingaben Abmessungen.

Das obige ist der detaillierte Inhalt vonWie kann ich das Design der Datei-Upload-Schaltfläche in allen Browsern ohne JavaScript anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!