Bagaimanakah Saya Boleh Menggantikan Kotak Semak Lalai dengan Imej Tersuai Menggunakan CSS?

Penggayaan Kotak Semak CSS Tersuai dengan Penggantian Imej

Anda telah menghadapi halangan untuk menggantikan penampilan kotak pilihan lalai dengan imej tersuai menggunakan CSS. Walaupun menggunakan tutorial CSS Ninja, anda masih menghadapi kesukaran untuk mencapai hasil yang diingini.

Untuk menjelaskannya, teknik ini melibatkan penggayaan label berkaitan kotak pilihan, bukan kotak pilihan itu sendiri. Ini membolehkan penyesuaian imej penuh. Walau bagaimanapun, anda mesti memastikan untuk menyembunyikan elemen kotak semak sebenar untuk mengelak daripada memaparkan penampilan asalnya.

Berikut ialah pecahan CSS yang anda berikan:

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

CSS ini menyasarkan label yang dikaitkan secara langsung dengan kotak pilihan dalam sel jadual yang tidak mempunyai ID "foo." Ia menetapkan imej latar belakang label kepada "off.png," menentukan ketinggian dan pelapiknya serta meletakkan imej di penjuru kiri sebelah atas.

Untuk menetapkan keadaan "hidup", gunakan CSS ini:

td:not(#foo) > input[type=checkbox]:checked + label {
    background: url('/images/on.png') 0 0px no-repeat;
}

Ia menyasarkan elemen yang sama seperti sebelumnya, tetapi hanya apabila kotak pilihan berada dalam keadaan ditandai. Peraturan ini mengemas kini imej latar belakang label kepada "on.png."

Contoh Penuh:

Rujuk kod dan demo lengkap berikut:

• Intisari: http://gist.github.com/592332
• JSFiddle: http://jsfiddle.net/4huzr/

Isi Penting:

• Sentiasa sembunyikan kotak pilihan dengan menetapkan sifat paparannya kepada "tiada" .
• Gayakan label yang berkaitan menggunakan sintaks pemilih CSS.
• Gunakan Kelas pseudo ":checked" untuk membezakan antara keadaan yang ditanda dan tidak ditanda.
• Ingat untuk menetapkan saiz dan kedudukan imej latar belakang dalam penggayaan label.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggantikan Kotak Semak Lalai dengan Imej Tersuai Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!