Bagaimanakah Saya Boleh Menyesuaikan Penampilan Input Fail dengan CSS3 dan JavaScript?

Menggayakan Fail Input dengan CSS3 dan JavaScript

Walaupun mungkin untuk menggayakan elemen "fail input" lalai menggunakan CSS3, pilihan penyesuaian adalah terhad. Untuk menyesuaikan penampilan input fail sepenuhnya atau mencetuskan tetingkap penyemakan imbas dengan elemen alternatif, berikut ialah cara anda boleh mencapainya menggunakan HTML, CSS3 dan JavaScript:

Menyesuaikan dengan jQuery

1. HTML: Masukkan kedua-dua input fail lalai dan elemen div yang akan berfungsi sebagai tersuai butang.

<div>

2. CSS: Sembunyikan input fail lalai.

#file {
    display: none;
}

3. jQuery : Balut input fail dalam div dengan dimensi tersembunyi untuk mengelakkan klik tidak sengaja. Gunakan acara perubahan untuk mengemas kini teks butang tersuai dengan laluan fail yang dipilih. Cetuskan peristiwa klik input fail apabila butang tersuai diklik.

var wrapper = $('<div/>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $(this).closest('#file').text($(this).val());
});

$('#file').click(function() {
    fileInput.click();
}).show();

Hasil:

Elemen input fail tersuai yang boleh disesuaikan melalui CSS dan mencetuskan tetingkap menyemak imbas fail apabila diklik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Penampilan Input Fail dengan CSS3 dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!