Cara Menggayakan ``: Menyembunyikan Kotak Teks Lalai dan Mengekalkan Hanya Butang?

Menggayakan : Mempertingkatkan UI Medan Input Fail

Menggayakan elemen input fail boleh mencabar , terutamanya apabila mencari reka bentuk yang bersih dan intuitif. Soalan ini menangani keperluan khusus untuk menyembunyikan kotak teks lalai dan hanya mengekalkan butang untuk pemilihan fail.

Penyelesaian: Memanfaatkan CSS dan HTML Tersuai

Untuk mencapai penggayaan ini , gabungan CSS dan HTML tersuai digunakan. Begini caranya:

1. Gunakan Elemen Diposisikan:

   • Letakkan kedua-dua elemen input fail asal () dan "fail palsu" tersuai menggunakan kedudukan mutlak.

2. Buat Butang Tersuai:

   • Buat butang berasingan dalam elemen tersuai untuk memaparkan teks "Pilih Fail" dalam elemen "fail palsu".

3. Sembunyikan Input Asal:

   • Tetapkan kelegapan input fail asal kepada sifar menggunakan kelegapan atau penapis untuk penyemak imbas lama.

4. Laraskan Sifat Paparan:

   • Tetapkan penjajaran teks bagi input asal ke kanan, membenarkan butang bertindih.
   • Letakkan butang tersuai di atas input asal dengan menetapkannya z-index kepada 1, dan input asal kepada 2.

Contoh Kod Lengkap:

Berikut ialah kod lengkap yang menunjukkan pelaksanaan penyelesaian ini:

<code class="html"><div class="fileinputs">
    <input type="file" class="file">

    <div class="fakefile">
        <input type="button" value="Select File">
    </div>
</div></code>

<code class="css">div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

div.fakefile input[type=button] {
    cursor: pointer;
    width: 148px;
}

div.fileinputs input.file {
    position: relative;
    text-align: right;
    opacity: 0;
    z-index: 2;
}</code>

Atas ialah kandungan terperinci Cara Menggayakan ``: Menyembunyikan Kotak Teks Lalai dan Mengekalkan Hanya Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!