Wie kann ich die Dateieingabeschaltfläche in Twitter Bootstrap anpassen?

Anpassen der Dateieingabeschaltfläche in Twitter Bootstrap

In Twitter Bootstrap fehlt dem Dateieingabeelement das elegante Design einer Schaltfläche. Es gibt jedoch eine einfache Lösung zum Erstellen einer anpassbaren Upload-Schaltfläche mithilfe von HTML.

Methode:

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

Dieser Ansatz nutzt das versteckte HTML5-Attribut, um eine Funktion zu erstellen Dateieingabesteuerelement, das als Schaltfläche angezeigt wird. Der Stil der Schaltfläche wird von der primären Schaltflächenklasse geerbt.

Legacy-Ansatz für den alten IE:

Für Browser ohne Unterstützung versteckter Attribute (z. B. IE8 und niedriger) verwenden Sie dieses CSS und HTML:

HTML:

<span class="btn btn-primary 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;
}

Diese Technik gewährleistet die Kompatibilität mit älteren IE-Versionen .

Zusätzlich Informationen:

Weitere Details und Beispiele finden Sie im ausführlichen Artikel unter:

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

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