Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS-tutorial css-php.cn

Cara Menggayakan Medan Input Fail Seperti Butang: Panduan CSS

Susan Sarandon

Lepaskan： 2024-11-04 01:17:02

asal

605 orang telah melayarinya

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>

Salin selepas log masuk

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!