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><pre class="brush:php;toolbar:false">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;
});