HTML 및 CSS의 확인란을 사용하여 다중 선택 드롭다운 메뉴를 어떻게 만듭니까?

체크박스를 드롭다운 메뉴에 통합하는 방법

다중 선택 드롭다운 목록을 만들면 사용자가 여러 옵션을 편리하게 선택할 수 있습니다. 드롭다운 필드 앞에 간단한 확인란을 사용하고 싶을 수도 있지만 이 방법은 각 옵션 대신 전체 목록에 대한 확인란을 표시합니다. 원하는 기능을 얻으려면 다음 단계를 따르십시오.

드롭다운 체크리스트 생성:

간단한 드롭다운 체크리스트를 생성하려면 다음 HTML 및 CSS 코드를 고려하십시오.

<div>
<pre class="brush:php;toolbar:false">.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를 사용하여 확인란 목록의 가시성을 제어할 수 있습니다.

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

결과:

이 솔루션은 드롭다운을 생성합니다. 체크박스를 선택하여 여러 옵션을 선택할 수 있는 메뉴입니다. "앵커" 요소는 체크박스 목록을 열고 닫는 버튼 역할을 합니다. 스타일은 웹사이트 디자인에 맞게 필요에 따라 맞춤 설정할 수 있습니다.