Wie kann ich mit Bootstrap eine benutzerdefinierte Datei-Upload-Schaltfläche erstellen?

Benutzerdefinierte Datei-Upload-Schaltfläche mit Bootstrap

Während es dem standardmäßigen Dateieingabeelement in Twitter Bootstrap möglicherweise an Ästhetik mangelt, ist es möglich, ein zu erstellen Benutzerdefinierte Schaltfläche, die das Aussehen der primären blauen Schaltfläche nachahmt.

Lösung mit HTML:

Für Bootstrap 3, 4 und 5 ist eine einfache HTML-Lösung verfügbar:

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

Dieses versteckte Eingabeelement fungiert als reguläres Dateieingabesteuerelement und behält dabei den benutzerdefinierten Schaltflächenstil bei.

Legacy-Ansatz für ältere Browser:

Wenn Sie Kompatibilität mit IE8 und niedriger benötigen, verwenden Sie die folgende HTML/CSS-Kombination:

HTML:

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

CSS:

.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;
}

Obwohl diese Methode zusätzliches CSS erfordert, gewährleistet sie die Kompatibilität mit älteren IE-Browsern.

Zusätzliche Hinweise:

Bitte beachten Sie, dass die versteckte Die Dateieingabe in der HTML-Lösung basiert auf dem versteckten HTML5-Attribut. Wenn Sie Unterstützung für noch ältere Browser benötigen, können Sie den Legacy-Ansatz verwenden.

Weitere Informationen und Beispiele zur Anzeige der ausgewählten Dateien finden Sie in der folgenden Ressource:

https:/ /www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

Das obige ist der detaillierte Inhalt vonWie kann ich mit Bootstrap eine benutzerdefinierte Datei-Upload-Schaltfläche erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!