Bagaimanakah Saya Boleh Menggayakan Elemen Input Fail dengan CSS3 dan JavaScript?

Menggayakan Elemen Fail Input dengan CSS3 dan JavaScript

Menggayakan elemen input HTML asli, seperti input fail, boleh mencabar. Walau bagaimanapun, adalah mungkin untuk meningkatkan penampilan mereka dan mencipta pengalaman pemilihan fail tersuai menggunakan CSS3 dan JavaScript.

Pilihan CSS3 untuk Menggayakan Input Fail

CSS3 tidak menyediakan langsung sokongan untuk menggayakan elemen input fail. Walau bagaimanapun, adalah mungkin untuk menggunakan ::-webkit-file-upload-button pseudo-element dalam penyemak imbas yang menyokong enjin pemaparan WebKit (cth., Chrome, Safari).

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript Pilihan untuk Pemilihan Fail

Pendekatan alternatif ialah mencipta elemen div tersuai yang mencetuskan input fail apabila diklik.

<div>

document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});

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