Bagaimanakah Saya Boleh Menyesuaikan Input Fail HTML5 Menggunakan CSS dan JavaScript?

Menyesuaikan Komponen "Fail Input" Menggunakan CSS3 dan Javascript

Menggayakan komponen menggunakan CSS3 dan JavaScript adalah mungkin. Sebagai alternatif, anda boleh mencipta div bergaya yang mencetuskan penyemak imbas fail apabila diklik.

Penggayaan CSS3

Untuk menggayakan komponen fail input, anda boleh menggunakan CSS3. Contohnya, gaya berikut boleh digunakan:

input[type="file"] {
    display: none;
}

Ini akan menyembunyikan komponen input fail lalai.

Pelaksanaan JavaScript/jQuery

Menggunakan JavaScript atau jQuery, anda boleh meningkatkan kefungsian komponen. Sebagai contoh, anda boleh mencipta div yang mencetuskan penyemak imbas fail apabila diklik:

<div>

#file {
    display: none;
}

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

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

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

Skrip ini menyembunyikan komponen fail input asal dan mencipta div boleh klik berlabel "Pilih Fail." Apabila div diklik, ia membuka penyemak imbas fail.

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