Bagaimanakah Saya Boleh Menyesuaikan Rupa Butang Input Fail Bootstrap?

Tingkatkan Bootstrap dengan Butang Input Fail Tersuai

Walaupun popular, Twitter Bootstrap pada masa ini tidak mempunyai butang muat naik elemen fail yang menarik secara visual. Walaupun butang itu kekal sebagai elemen penyemak imbas asli yang kelihatan tidak boleh disentuh oleh CSS, terdapat penyelesaian yang berdaya maju untuk menyesuaikan penampilannya.

Bootstrap 3-5: Penyelesaian HTML Mudah

Memanfaatkan HTML sahaja, anda boleh cipta kawalan input fail berfungsi menyerupai butang:

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

Pelayar moden, termasuk IE9 , sedia menyokong ini pendekatan. Walau bagaimanapun, untuk keserasian dengan versi IE yang lebih lama, pertimbangkan pendekatan warisan berikut.

Pendekatan Warisan untuk IE Lama

Untuk menyokong IE8 dan ke bawah, gunakan kombinasi HTML/CSS ini:

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

Teknik ini, dikenali sebagai "CSS bloat," mengimbangi kekurangan pengaktifan input fail pada label mengklik dalam IE lama dengan:

• Menjangkau input fail merentasi lebar/tinggi penuh bekasnya
• Menyembunyikan elemen input fail

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Rupa Butang Input Fail Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!