Wie erstelle ich Kontrollkästchen in einer Dropdown-Liste für Mehrfachauswahl?-CSS-Tutorial-php.cn

Kontrollkästchen innerhalb einer Dropdown-Liste erstellen

Beim Erstellen einer Mehrfachauswahl-Dropdown-Liste besteht das Ziel darin, Benutzern die Auswahl mehrerer Optionen aus einer Dropdown-Liste zu ermöglichen Dropdown-Menü. Mit einem einfachen Ansatz wie dem Hinzufügen eines innerhalb eines Tag führt dazu, dass das Kontrollkästchen vor dem Dropdown-Feld angezeigt wird.

Um dieses Problem zu beheben und die Auswahl mehrerer Optionen zu ermöglichen, ist ein ausgefeilterer Ansatz erforderlich. Hier ist eine Lösung, die Kontrollkästchen für jede Option im Dropdown-Menü erstellt:

.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; } Nach dem Login kopieren 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'); }; Nach dem Login kopieren Nach dem Login kopieren Dieser Ansatz verwendet CSS und JavaScript, um eine funktionale Checkliste zu erstellen, die im Dropdown-Menü angezeigt wird. Durch Klicken auf den Anker „Früchte auswählen“ können Benutzer die Liste der Optionen ein- oder ausblenden und mithilfe von Kontrollkästchen mehrere Früchte auswählen.