Wie kann ich das Erscheinungsbild der Schaltfläche zum Hochladen von Twitter-Bootstrap-Dateien anpassen?

Anpassen der Datei-Upload-Schaltfläche von Twitter Bootstrap

Obwohl es in Twitter Bootstrap keinen speziellen Stil für die Datei-Upload-Schaltfläche gibt, gibt es mehrere Methoden, um ihr Erscheinungsbild zu verbessern.

Eine Lösung, die für die Bootstrap-Versionen 3, 4 und 5 anwendbar ist, nutzt das versteckte HTML5-Attribut, um eine funktionale Dateieingabesteuerung zu erstellen ähnelt einer Schaltfläche:

<label class="btn btn-default">
  Browse <input type="file" hidden>
</label>

Dieser Ansatz basiert auf dem versteckten Attribut, das Bootstrap 4 aus Kompatibilitätsgründen mit CSS emuliert. Für Bootstrap 3 ist möglicherweise dieses zusätzliche CSS erforderlich:

[hidden] {
  display: none !important;
}

Legacy-Ansatz für alten IE:

IE8 und niedriger erfordern eine andere HTML/CSS-Struktur:

<span class="btn btn-default btn-file">
  Browse <input type="file">
</span>

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

Anmerkungen:

• Alter IE erlaubt keine Auslösung der Dateieingabe beim Klicken auf das Label.
• Das CSS gleicht dies aus, indem es die Dateieingabe so erweitert, dass sie mit der Spanne übereinstimmt, und sie dann ausblendet.

Weitere Details und Beispiele finden Sie unter der Blogbeitrag von Abeautifulsite: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild der Schaltfläche zum Hochladen von Twitter-Bootstrap-Dateien anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!