Bagaimanakah saya boleh membuat alternatif kotak semak yang menggunakan imej dan mengecilkan imej apabila mengklik, menindih kotak semak?

Gunakan Imej Seperti Kotak Pilihan

Masalah

Buat alternatif kepada kotak semak standard di mana pengguna mengklik imej untuk mengecilkan imej dan menindih kotak semak.

Penyelesaian

Semantik Tulen Penyelesaian HTML/CSS

Penyelesaian ini menghapuskan keperluan untuk penyelesaian pra-dibuat dan meningkatkan pemahaman teknik CSS.

Langkah:

1. Tetapkan ID unik pada kotak pilihan dan sambungkannya ke label menggunakan label untuk atribut.
2. Sembunyikan kotak pilihan menggunakan CSS (cth., paparan: tiada;).

3. Gunakan label::before elemen pseudo sebagai pengganti visual untuk kotak pilihan:

   • Tetapkan imej latar belakang awal untuk yang tidak ditandai keadaan.

4. Gunakan pemilih pseudo :checked untuk menukar imej apabila kotak pilihan ditandakan:

   • Gunakan imej latar belakang untuk keadaan yang ditandai .
   • Gunakan pemilih adik-beradik ( ) untuk menyasarkan hanya label bersebelahan dengan kotak semak.
5. Gayakan label dengan kedudukan, paparan, lebar dan tinggi yang betul.

Edit

Kotak Semak CSS tulen Penggantian

Pengubahsuaian ini mempamerkan penyelesaian berasaskan CSS semata-mata tanpa menggunakan imej:

• Buat elemen ::before pada label dengan kandungan "✓".
• Gunakan sempadan bulat dan peralihan untuk meningkatkan penampilan visual.

Pelaksanaan

Contoh codepen menunjukkan teknik ini dalam tindakan:

http://codepen.io/anon/pen/wadwpx

Coretan Kod

/* Style the labels and images */
label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

/* Style the checked state */
:checked + label {
  border-color: #ddd;
}

:checked + label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

/* Style the unordered list that contains the checkboxes */
ul {
  list-style-type: none;
}

/* Style the individual list items */
li {
  display: inline-block;
}

<ul>
  <li><input type="checkbox">

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat alternatif kotak semak yang menggunakan imej dan mengecilkan imej apabila mengklik, menindih kotak semak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!