Bagaimanakah Saya Boleh Menggantikan Imej Kotak Semak Lalai dengan Imej Hidup/Mati Tersuai Menggunakan CSS Tulen?

Penggantian Imej Kotak Semak CSS Tulen

Dalam jadual HTML dengan senarai kotak pilihan, anda mungkin mahu menggantikan imej kotak pilihan lalai dengan imej hidup/mati tersuai. CSS boleh dimanfaatkan untuk mencapai peningkatan estetik ini.

Teknik Input Tersuai CSS

Seperti yang disebut oleh "CSS ninja," satu pendekatan melibatkan penggunaan kelas pseudo untuk menggayakan label yang dikaitkan dengan kotak pilihan, bukannya kotak semak itu sendiri. Ini memastikan bahawa imej dipaparkan dalam kedudukan yang betul dan bertindak balas kepada keadaan kotak pilihan.

Pelaksanaan Kod CSS

Disediakan di bawah adalah kod CSS lengkap yang akan menyembunyikan kotak semak sebenar dan mengaitkannya dengan label gaya:

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

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

Berikut ialah pecahan kod:

• Kotak pilihan (input[type="checkbox"]) disembunyikan menggunakan paparan: none;.
• Label yang dikaitkan dengan kotak pilihan (input[type="checkbox" "] label) digayakan untuk mempunyai paparan blok, lebar dan ketinggian 16px dan imej latar belakang imej keadaan "mati".
• Apabila kotak semak ditandakan (input[type="checkbox"]:checked), imej latar belakang baharu bagi imej keadaan "on" digunakan pada label.

Hasilnya

Ini Kod CSS akan berjaya menggantikan imej kotak pilihan lalai dengan imej hidup/mati tersuai, memberikan anda senarai kotak pilihan yang lebih menarik secara visual dan boleh disesuaikan. Anda boleh bereksperimen dengan reka bentuk imej yang berbeza untuk memadankan estetik reka bentuk web khusus anda.

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