Wie kann ich Schaltflächen zum Hochladen von Dateien in Twitter Bootstrap gestalten?

Schaltfläche zum Hochladen von Dateien in Twitter Bootstrap gestalten

Es ist überraschend, dass Twitter Bootstrap eine ästhetisch ansprechende Schaltfläche zum Hochladen von Dateien fehlt. Es stellt sich die Frage, ob dieses Element mithilfe von CSS angepasst werden kann.

Anpassung mithilfe von HTML und CSS

Für Bootstrap 3, 4 und 5 gibt es eine funktionale Dateieingabesteuerung ähnelt einer Schaltfläche, kann allein mit HTML erstellt werden:

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

Dieser Ansatz nutzt das versteckte Attribut in HTML5. Stellen Sie bei Browsern, die dieses Attribut nicht unterstützen, sicher, dass Sie das folgende CSS einschließen:

[hidden] {
  display: none !important;
}

Legacy-Ansatz für ältere IE

Zur Unterstützung von IE8 und früher, HTML /CSS-Änderungen sind erforderlich:

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

Dieses CSS behebt Probleme mit dem alten IE, indem es die Dateieingabe vornimmt volle Breite/Höhe innerhalb des und unsichtbar.

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