> 웹 프론트엔드 > CSS 튜토리얼 > HTML, CSS 및 JavaScript의 확인란이 있는 사용자 정의 다중 선택 드롭다운 체크리스트를 만드는 방법은 무엇입니까?

HTML, CSS 및 JavaScript의 확인란이 있는 사용자 정의 다중 선택 드롭다운 체크리스트를 만드는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-17 02:12:03
원래의
264명이 탐색했습니다.

How to Create a Custom Multiple Selection Dropdown Checklist with Checkboxes in HTML, CSS, and JavaScript?

다중 선택 드롭다운 체크리스트 생성

드롭다운 목록을 생성할 때 사용자가 여러 옵션을 선택할 수 있도록 하는 것이 바람직한 경우가 많습니다. HTML을 사용하면 드롭다운 옵션 내에서 체크박스를 사용하여 이를 수행할 수 있습니다.

체크박스가 있는 기존 드롭다운:

추가 코드 없이 드롭다운 목록에 체크박스를 추가하는 경우 드롭다운 필드 앞에 확인란이 나타납니다. 이를 변경하려면 보다 진보된 접근 방식이 필요합니다.

사용자 정의 드롭다운 체크리스트 구현:

다음 코드 조각은 사용자 정의 드롭다운 체크리스트를 생성하는 방법을 보여줍니다.

<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');
};
로그인 후 복사

설명:

  • HTML: HTML 구조는 다음을 나타내는 앵커 요소가 있는 기본 드롭다운을 생성합니다. 드롭다운 헤더와 확인란이 있는 드롭다운 옵션이 포함된 순서가 지정되지 않은 목록.
  • CSS: CSS 스타일은 확인란 스타일과 드롭다운의 표시 동작을 포함하여 드롭다운의 레이아웃과 모양을 정의합니다. 드롭다운 옵션.
  • JavaScript: JavaScript 코드는 앵커 요소를 클릭할 때 드롭다운 옵션의 열기 및 닫기를 처리합니다.

위 내용은 HTML, CSS 및 JavaScript의 확인란이 있는 사용자 정의 다중 선택 드롭다운 체크리스트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿