Bagaimanakah Saya Boleh Menggayakan Butang Muat Naik Fail dalam Twitter Bootstrap?

Menggayakan Butang Muat Naik Fail dalam Twitter Bootstrap

Sungguh menghairankan bahawa Twitter Bootstrap tidak mempunyai butang muat naik yang menarik dari segi estetika. Timbul persoalan jika elemen ini boleh disesuaikan menggunakan CSS.

Penyesuaian Menggunakan HTML dan CSS

Untuk Bootstrap 3, 4 dan 5, kawalan input fail berfungsi yang menyerupai butang boleh dibuat dengan HTML sahaja:

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

Pendekatan ini memanfaatkan atribut tersembunyi dalam HTML5. Untuk penyemak imbas yang tidak menyokong atribut ini, pastikan anda memasukkan CSS berikut:

[hidden] {
  display: none !important;
}

Pendekatan Warisan untuk IE Lama

Untuk menyokong IE8 dan lebih awal, HTML /Pengubahsuaian CSS diperlukan:

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

CSS ini menangani isu dengan IE lama dengan membuat input fail lebar penuh/tinggi dalam dan tidak kelihatan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Butang Muat Naik Fail dalam Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!