Bagaimanakah Saya Boleh Menukar Imej Butang Input Menggunakan CSS dan Mengendalikan Isu Keserasian Penyemak Imbas?

Menukar Imej Butang Input dengan CSS

Apabila mencipta butang input dengan imej menggunakan HTML, atribut "type=image" digunakan bersama dengan URL sumber. Walau bagaimanapun, menggayakan butang dengan CSS menjadi satu cabaran kerana atribut "src" tidak boleh diubah suai melalui CSS.

Penggayaan CSS untuk Butang Input Bukan Imej

Untuk menggayakan butang input dengan rupa imej menggunakan CSS, pertimbangkan untuk menukar jenis butang kepada "serahkan." Ini mengalih keluar keperluan untuk sumber imej.

<INPUT type="submit" class="myButton" value="" />

Dalam fail CSS, takrifkan kelas "myButton" seperti berikut:

.myButton {
    background-image: url(/images/Btn.PNG);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Pendekatan ini membolehkan anda menggunakan kesan tuding dengan mentakrifkan kelas "myButton:hover".

Pelayar Keserasian

Safari menimbulkan cabaran dengan tidak menyokong kaedah penggayaan yang disebutkan di atas untuk sebarang butang. Untuk menyokong Safari, pertimbangkan untuk meletakkan imej dan menggunakan JavaScript untuk fungsi onclick yang menyerahkan borang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Imej Butang Input Menggunakan CSS dan Mengendalikan Isu Keserasian Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!