Bagaimana untuk Membuat Senarai Semak Turun Berbilang Pilihan Tersuai dengan Kotak Pilihan dalam HTML, CSS dan JavaScript?

Membuat Senarai Semak Turun Berbilang Pilihan

Apabila membuat senarai lungsur turun, selalunya wajar untuk membenarkan pengguna memilih berbilang pilihan. Menggunakan HTML, ini boleh dicapai dengan menggunakan kotak pilihan dalam pilihan lungsur turun.

Tinggal Turun Konvensional dengan Kotak Pilihan:

Apabila menambahkan kotak pilihan pada senarai lungsur tanpa kod tambahan, kotak semak muncul di hadapan medan lungsur turun. Untuk mengubahnya, pendekatan yang lebih maju diperlukan.

Melaksanakan Senarai Semak Jatuh Turun Tersuai:

Coretan kod berikut menunjukkan cara membuat senarai semak lungsur tersuai:

<div>

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};

Penjelasan:

• HTML: Struktur HTML mencipta dropdown asas dengan elemen utama yang mewakili pengepala lungsur turun dan senarai tidak tertib yang mengandungi pilihan lungsur turun dengan kotak pilihan.
• CSS: Gaya CSS mentakrifkan reka letak dan rupa lungsur turun, termasuk penggayaan kotak pilihan dan gelagat paparan pilihan lungsur turun.
• JavaScript: Kod JavaScript mengendalikan pembukaan dan penutupan pilihan lungsur turun apabila elemen penambat diklik.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Senarai Semak Turun Berbilang Pilihan Tersuai dengan Kotak Pilihan dalam HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!