cari

Rumah >hujung hadapan web >tutorial css >Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS

Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS

Susan Sarandon
Susan Sarandonasal
2024-11-04 01:17:02686semak imbas

How To Style File Input Fields Like Buttons: A CSS Guide

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"><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>
</html></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!

css for while Interface this input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Menunjukkan Elemen Anak Tersembunyi Semasa Ibu Bapa Mereka Tersembunyi?Artikel seterusnya：Bagaimana untuk Menunjukkan Elemen Anak Tersembunyi Semasa Ibu Bapa Mereka Tersembunyi?

Artikel berkaitan

Lihat lagi