如何將復(fù)選框集成到下拉菜單中

創(chuàng)建多選下拉列表可以讓用戶方便地選擇多個選項。盡管您可能想在下拉字段前面使用一個簡單的復(fù)選框，但此方法顯示整個列表的復(fù)選框，而不是每個選項的復(fù)選框。要實現(xiàn)所需的功能，請按照以下步驟操作：

創(chuàng)建下拉清單：

考慮以下 HTML 和 CSS 代碼來創(chuàng)建簡單的下拉清單：

<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;
}

JavaScript 可用于控制復(fù)選框的可見性列表。

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');
};

結(jié)果：

此解決方案創(chuàng)建一個下拉菜單，您可以通過選中復(fù)選框來選擇多個選項。 “anchor”元素充當(dāng)打開和關(guān)閉復(fù)選框列表的按鈕?？梢愿鶕?jù)需要自定義樣式以匹配您網(wǎng)站的設(shè)計。

以上是如何使用 HTML 和 CSS 中的復(fù)選框創(chuàng)建多選下拉菜單？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！