다중 선택을 위해 드롭다운 목록 안에 확인란을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

드롭다운 목록 안에 확인란 만들기

다중 선택 드롭다운 목록을 만들 때 목표는 사용자가 목록에서 여러 옵션을 선택할 수 있도록 하는 것입니다. 드롭다운 메뉴. 태그를 지정하면 드롭다운 필드 앞에 확인란이 표시됩니다.

이 문제를 해결하고 여러 옵션을 선택할 수 있도록 하려면 보다 정교한 접근 방식이 필요합니다. 다음은 드롭다운 내의 각 옵션에 대한 확인란을 생성하는 솔루션입니다.

.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'); }; 로그인 후 복사 로그인 후 복사 이 접근 방식은 CSS와 JavaScript를 활용하여 드롭다운 내에 표시되는 기능 체크리스트를 생성합니다. "과일 선택" 앵커를 클릭하면 사용자는 옵션 목록을 표시하거나 숨길 수 있으며 확인란을 사용하여 여러 과일을 선택할 수 있습니다.