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
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;
}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');
};<div>
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.
Das obige ist der detaillierte Inhalt vonWie erstelle ich Kontrollkästchen in einer Dropdown-Liste für Mehrfachauswahl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist der Rückgabewert der Funktion?
besonderer Symbolpunkt
Gängige Verschlüsselungsmethoden für die Speicherung verschlüsselter Daten
Einführung in Befehle zum Erstellen neuer Dateien unter Linux
Die heutigen neuesten offiziellen Nachrichten von PaiCoin sind wahr
BIOS kann Solid-State-Laufwerk nicht erkennen
location.search
Excel-Tabellen-Schrägstrich in zwei Teile geteilt
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
