Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS

Menggayakan Medan Input dengan Jenis "Fail"

Dalam bidang pembangunan web, menyesuaikan penampilan medan input selalunya menjadi satu keperluan. Walaupun jenis input konvensional mungkin mencukupi, mereka bentuk elemen tertentu seperti pemilih fail boleh memberikan cabaran unik.

Teka-teki Kotak Teks Halimunan

Salah satu cabaran sedemikian ialah menyembunyikan kotak teks tradisional yang dikaitkan dengan medan input fail. Meningkatkan pengalaman pengguna selalunya memerlukan antara muka butang sahaja. Untuk mencapai matlamat ini, pertimbangkan pendekatan berpusatkan CSS berikut:

Pelaksanaan CSS:

Coretan berikut menunjukkan cara menyamarkan kotak teks sambil mengekalkan kefungsian butang:

<code class="html">
    <style type="text/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;
        }
    </style>

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

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

Dengan meletakkan elemen "fail palsu" di atas kotak teks asal dan menetapkan butang inputnya kepada lebar penuh, penampilan pemilih fail gaya butang dicipta. Pada masa yang sama, kotak teks sebenar disembunyikan secara visual dengan kelegapan sifar.

Atas ialah kandungan terperinci Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!