Bagaimana untuk Menggayakan Elemen Input Fail HTML?

Menggayakan Input Type="file"

Apabila cuba menyesuaikan elemen input HTML jenis "fail", anda mungkin mengalami kesukaran disebabkan sekatan pelayar. Tidak seperti kawalan borang lain, input type="file" mempunyai keupayaan penggayaan terhad. Untuk mengatasi had ini, pertimbangkan untuk menggunakan teknik berikut.

Kaedah CSS

Pendekatan ini melibatkan penggunaan CSS untuk menyembunyikan input fail asal dan mencipta butang "palsu" tersuai yang mencetuskan dialog pemilihan fail.

<code class="css">/* Hide the actual file input */
input.file {
  display: none;
}

/* Create a custom "fake" button */
.fakefile {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  cursor: pointer;
}

/* Style the custom button */
.fakefile input[type=button] {
  width: 100%;
  height: 100%;
}</code>

<code class="html"><!-- HTML Code -->
<div class="fileinputs">
  <input type="file" class="file" />
  <div class="fakefile">
    <input type="button" value="Select file" />
  </div>
</div></code>

Setelah mengklik butang tersuai, dialog pemilihan fail akan dibuka, membenarkan pengguna memilih fail. Laluan fail yang dipilih akan diberikan kepada input fail tersembunyi, manakala butang tersuai kekal kelihatan sebagai antara muka pemilih fail.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Input Fail HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!