HTML bietet eine native Möglichkeit, ein Auswahlfeld zu erstellen, das die Auswahl mehrerer Elemente mit dem Multiple-Attribut auf Select-Elementen unterstützt, aber das Rendering ist wirklich nicht sehr kompakt oder hübsch, und es gibt nicht viel, was man stilistisch mit Optionen in einem Auswahlfeld tun kann. Ich konnte keine benutzerdefinierten Designs finden, die dem Stil entsprechen, den ich suchte, also habe ich am Ende meine eigenen erstellt. Der vollständige Code ist auf meinem GitHub hier zusammen mit einer passenden Suchleiste verfügbar.
Dies ist von Grund auf neu erstellt, da es schwierig ist, das Verhalten und den Stil eines normalen Selects zu ändern. Der normalerweise sichtbare Teil des Selects ist ein einfacher Button. Das Dropdown-Menü ist ein Div, das von der Bootstrap-Utility-Klasse d-none ausgeblendet wird, wobei Rundung und Schattierung über die Bootstrap-Utility-Klassen shadow und rounded angewendet werden. Die Optionen sind einfache Kontrollkästchen mit Beschriftung. Diese könnten durch Optionsfelder ersetzt werden, wenn Sie ein passendes einzelnes Auswahlfeld wünschen.
Hier ist das endgültige HTML für die Schaltfläche und das Menü
<div> <button onclick="dropDown(event);" class="menu-btn" type="button"> Menu 1 ⌵ </button> <div class="d-none shadow rounded menu"> <span class="d-block menu-option"><label><input type="checkbox"> Option 1</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 2</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 3</label></span> </div></div>Ich wollte, dass die Menü-Schaltfläche abgerundet und ziemlich klein ist, also habe ich sie entsprechend gestaltet (Sie können sie natürlich so gestalten, wie Sie wollen, das beeinträchtigt die Funktion überhaupt nicht):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Für das Menü selbst habe ich ein wenig Polsterung hinzugefügt, damit der Text nicht gegen den oberen Rand des Menüs läuft und etwas Rand, damit er sich nicht mit der Schaltfläche überschneidet (beides völlig optional). Ich fügte auch einen hohen Z-Index hinzu (damit es über anderen Dingen angezeigt wird), eine Hintergrundfarbe (Standard ist transparent, was in diesem Zusammenhang albern aussieht) und setzte die Position auf absolut, damit es nicht andere Dinge auf der Seite nach unten drückt.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Für die Menüoptionen fügte ich ein wenig Polsterung hinzu, um sie zu trennen.
.menu-option { padding: 6px 20px 6px;}Wir brauchen eine Möglichkeit, zu erkennen, wenn außerhalb des Dropdown-Menüs geklickt wird, damit es wie ein normales Auswahlfeld durch Klicken außerhalb des Menüs geschlossen werden kann. Dazu habe ich ein Div erstellt, das sich über den gesamten Bildschirm erstreckt und einen niedrigeren z-Index als das Menü hat. Dies ermöglicht es uns, alle Klicks außerhalb des Menüs zu erkennen
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;} Damit dies tatsächlich funktioniert, brauchen wir JavaScript-Funktionen, um die Menüs und das Overlay erscheinen und verschwinden zu lassen.
Diese Funktion entfernt die d-none-Klassen aus dem Menü und dem Overlay und aktiviert sie. Anstatt dies über die ID zu tun, nimmt sie einfach das zweite Element des übergeordneten Elements des Ziels (der Schaltfläche) und geht davon aus, dass es sich dabei um das Menü handelt. Dies ist der Grund dafür, dass das Menü und die Schaltfläche in ein ansonsten leeres div.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Diese Funktion fügt dem Overlay und allen Elementen mit der Klasse menu die Klasse d-none hinzu und blendet sie aus.
function hide(event) { var items = document.getElementsByClassName('menu'); for (let i = 0; i < items.length; i++) { items.classList.add("d-none"); } document.getElementById("overlay").classList.add("d-none");}Wenn Sie dies nützlich fanden, könnte Ihnen auch mein passendes Suchleistendesign gefallen.