Wie kann ich das Erscheinungsbild der Dateieingabeschaltfläche von Bootstrap anpassen?

Verbessern Sie Bootstrap mit einer maßgeschneiderten Schaltfläche zur Dateieingabe

Trotz seiner Beliebtheit fehlt Twitter Bootstrap derzeit eine optisch ansprechende Schaltfläche zum Hochladen von Dateielementen. Während die Schaltfläche ein natives Browserelement bleibt, das von CSS scheinbar nicht berührt werden kann, gibt es praktikable Lösungen, um ihr Erscheinungsbild anzupassen.

Bootstrap 3-5: Eine einfache HTML-Lösung

Mit HTML allein ist das möglich Erstellen Sie ein funktionales Dateieingabesteuerelement, das einer Schaltfläche ähnelt:

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

Moderne Browser, einschließlich IE9, unterstützen diesen Ansatz problemlos. Aus Gründen der Kompatibilität mit älteren IE-Versionen sollten Sie jedoch den folgenden Legacy-Ansatz in Betracht ziehen.

Legacy-Ansatz für alten IE

Um IE8 und niedriger zu unterstützen, verwenden Sie diese HTML/CSS-Kombination:

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

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Diese als „CSS-Bloat“ bekannte Technik kompensiert die fehlende Aktivierung der Dateieingabe beim Klicken auf ein Label im alten IE durch:

• Erweitern der Dateieingabe über die gesamte Breite/Höhe ihres Containers
• Verbergen des Dateieingabeelements

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