Bagaimanakah Saya Boleh Menyesuaikan Penggayaan Butang Muat Naik Fail Merentasi Pelayar Tanpa JavaScript?

Menyesuaikan Penggayaan Butang Muat Naik Fail Merentasi Penyemak Imbas

Memperibadikan penampilan butang muat naik fail boleh mencabar tanpa menggunakan JavaScript. Walau bagaimanapun, teknik yang mudah dan berkesan wujud yang memanfaatkan tag label untuk mencapai hasil yang diingini.

Menggunakan Tag

tag menyediakan cara untuk mengaitkan label teks dengan input borang. Dengan melampirkan input muat naik fail tersembunyi dalam label, anda masih boleh menangkap peristiwa klik dalam label dan mengubah halanya ke input tersembunyi.

Penggayaan CSS

Setelah input muat naik fail disembunyikan, anda boleh menggayakan label sekeliling dengan bebas menggunakan CSS. Contohnya, kod berikut menunjukkan butang muat naik fail tersuai:

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

/***** Example custom styling *****/
.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;
}

Pelaksanaan HTML

Untuk melaksanakan teknik ini dalam HTML:

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

Dengan menggunakan pendekatan ini, anda mendapat kawalan sepenuhnya ke atas penggayaan butang muat naik fail, tanpa sebarang JavaScript dan tanpa had yang dikenakan oleh dimensi input yang ditakrifkan penyemak imbas.

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