Bagaimana Saya Boleh Menggayakan Butang Muat Naik Fail Tanpa JavaScript?

Menggayakan Butang Muat Naik Fail Tanpa JavaScript

Banyak percubaan untuk menyesuaikan butang muat naik fail sering menggunakan pendekatan JavaScript atau Quirksmode, yang mempunyai had dari segi dimensi dan pelarasan automatik. Artikel ini meneroka penyelesaian yang kurang meretas menggunakan tag.

Memanfaatkan Tag

elemen membolehkan kami menggayakan butang muat naik fail tanpa JavaScript. Ia memajukan acara klik kepada elemen anaknya, membolehkan kami menggunakannya sebagai pembungkus untuk butang muat naik fail tersembunyi.

Contoh Kod

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

Dalam contoh ini, kami menyembunyikan butang muat naik fail menggunakan position:absolute dan top:-1000px dan gayakan tag seperti yang dikehendaki. Label menerima peristiwa klik dan memajukannya ke butang input tersembunyi.

Kelebihan Pendekatan Ini

• Membenarkan fleksibiliti yang lebih besar dalam penggayaan berbanding dengan penggayaan terbina dalam webkit.
• Tiada JavaScript diperlukan, menjadikannya lebih cekap.
• Ia mengatasi batasan Pendekatan Quirksmode, membolehkan butang fail mengisi keseluruhan bekas induk.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggayakan Butang Muat Naik Fail Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!