Bagaimanakah Saya Boleh Menggayakan Kawalan Fail Input dengan CSS3 dan JavaScript/jQuery?

Menggayakan Kawalan Fail Input dengan CSS3 dan JavaScript/jQuery

Walaupun fungsinya yang wujud, kawalan fail input sering gagal dari segi daya tarikan visual. CSS3 menawarkan keupayaan terhad untuk menggayakan elemen ini, tetapi dengan bantuan JavaScript atau jQuery, anda boleh meningkatkan penampilannya dan membawanya selaras dengan reka bentuk anda.

Menggunakan CSS untuk Memperbaik Penampilan Butang

Walaupun CSS3 sahaja tidak boleh mengubah rupa asas butang fail input, ia boleh digunakan untuk mempengaruhi bekasnya. Sebagai contoh, anda boleh mentakrifkan warna latar belakang tersuai atau jejari sempadan untuk div yang merangkumi:

.input-file-container {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

Membuka Dialog Semak Imbas Menggunakan Div Bergaya

Sebagai alternatif, anda boleh mencipta div yang menarik secara visual yang , apabila diklik, mencetuskan dialog semak imbas fail. Begini caranya:

HTML
Buat elemen fail input tersembunyi dan div gaya yang akan bertindak sebagai butang boleh klik.

<div>
<p><strong>CSS </strong><br>Gayakan div supaya menyerupai a butang.</p>
<pre class="brush:php;toolbar:false">#file-button {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

JavaScript/jQuery
Ikat pengendali acara pada div untuk membuka dialog semak imbas fail apabila diklik.

$('#file-button').click(function() {
  $('#file-input').click();
});

Pendekatan ini memberikan lebih fleksibiliti dalam menggayakan kawalan fail input dan membolehkan anda memadankannya dengan estetika reka bentuk keseluruhan anda.