10 kostenlose CSS- und JavaScript-Select-Box-Snippets

Die standardmäßigen HTML-Auswahlfelder haben uns jahrzehntelang gute Dienste geleistet. Aber in der Neuzeit ist es fair zu sagen, dass sie ein wenig ... altbacken sind.

Designer können es besser machen und dank der Fortschritte in CSS ist es einfach, Auswahlfelder anzupassen. Ganz zu schweigen von all dem Open-Source-Code, der online frei verfügbar ist.

Ich habe eine Sammlung meiner Top-10-Picks für handgefertigte Select-Box-Stile zusammengestellt. Diese werden nicht als Plugins veröffentlicht, sondern stützen sich stattdessen auf Vorlagen für die JavaScript- und CSS-Anpassung. Aber sie sind alle genauso einfach einzurichten und sogar für Ihre eigenen Zwecke umzugestalten.

1. Benutzerdefiniertes Auswahlmenü

Den Auftakt der Kollektion bilden Wallace Ericks benutzerdefinierte ausgewählte Menüstile.

Es verwendet sowohl CSS für die Neugestaltung als auch JavaScript für die Konfiguration der UX der Menüs. Sie verhalten sich etwas anders als Standard-HTML-Auswahlen, und ich denke, sie sind etwas angenehmer zu verwenden.

Sie können die Größe und den Farbstil des Menüs auswählen oder mit den Standardeinstellungen von Wallace arbeiten. Das Beste von allem ist, dass er ein benutzerdefiniertes Upload-Felddesign enthält, von dem Sie wissen werden, dass es schwierig ist, wenn Sie jemals versucht haben, es neu zu gestalten.

Ein ausgezeichneter Ausgangspunkt, wenn Sie nur saubere, aber frisch aussehende ausgewählte Menüs wünschen, die funktionieren.

2. Einfache Auswahl

Hier ist eine weitere sehr einfache Auswahlbox, die darauf abzielt, sich natürlicher in jedes Layout einzufügen.

Diese setzt auf dezentere Farben mit einem schlichten Schwarz-Weiß-Farbschema. Aber es verwendet auch JavaScript, um das Auswahlmenü ein- und auszublenden.

Es funktioniert, indem es auf ein verstecktes Eingabefeld abzielt, das sich genau wie das Auswahlfeld verhält. Auf diese Weise können Sie immer noch Daten aus dem Frontend in Ihre Formulare ziehen, da diese Lösung technisch gesehen nicht das eigentliche <select> -Element verwendet.

Wenn die Kompatibilität ein Problem darstellt, überspringen Sie diese. Aber ich muss zugeben, dass das Design wunderschön ist und perfekt für Desktop-Traffic wäre.

3. Non-Sucky-HTML-Dropdowns

Wie der Name schon sagt, zielt dieses Paket ausgewählter Menüs darauf ab, einfach nicht zu saugen. Sie alle haben unterschiedliche Stile und Größen mit Schaltflächen, auf die Sie klicken können, um die Farben bei Bedarf zu ändern.

Natürlich können Sie diese Funktion in Ihrem eigenen Layout entfernen und sich an ein Schema halten, das für Ihre Website funktioniert. Aber insgesamt funktionieren diese ausgewählten Menüs wie ein normales und sind großartig zu bedienen.

Wenn Sie sich Sorgen um die Kompatibilität machen, sollten Sie mit dieser Vorlage arbeiten.

Die meisten Änderungen sind kosmetischer Natur und sollten das Benutzerverhalten nicht sehr stark beeinflussen.

4. Platzhalter auswählen

Das eigentliche Design dieses Platzhalter-Auswahlmenüs ist wunderschön, aber das Design ist hier nicht der einzige Faktor.

Entwickler James Nowland hat dieses Menü mit dem Ziel erstellt , die Standardeinstellung aus der Auswahl zu entfernen . Dies bedeutet, dass es sich eher wie ein Platzhalter in Textfeldern verhält, wo Sie es sehen, wenn das Feld leer ist, aber sobald Sie einen Wert festlegen, verschwindet es.

Es ist vollständig kompatibel und funktioniert mit dem eigentlichen HTML-Select-Element. Ein Optionsfeld wird standardmäßig ausgeblendet, wenn der Benutzer eine Auswahl trifft. Auf diese Weise sehen Sie nirgendwo im Dropdown-Menü den Text „Wählen Sie eine Option“. Wirklich kreative Lösung!

5. Flaches Design

Ästhetik spielt im Webdesign oft eine Rolle und dieses flache Auswahlmenü ist ein großartiges Beispiel.

Es funktioniert immer noch wie eine typische Auswahl und der Dropdown-Teil wurde überhaupt nicht geändert. Aber allein die Neugestaltung der Auswahl selbst belebt die Seite. Es fühlt sich viel edler an als die hässliche Standardeinstellung des Browsers.

Sie könnten diese Vorlage sogar nehmen und sie mit Ihren eigenen flachen Stilen erweitern, die auf den Dropdown-Bereich angewendet werden. Ganz Ihr Anruf!

Aber als Startvorlage ist dies eine der einfachsten Möglichkeiten für jede Schnittstelle.

6. Reines CSS

Ich bin ein großer Fan von reinem CSS gegenüber JavaScript, weil es den gesamten Designprozess vereinfacht. Das ist nicht einfach, aber es gibt so viele Lösungen da draußen.

Einer meiner Favoriten ist dieses Snippet, das nicht nur reine CSS-Auswahlmenüs, sondern auch Radios und Kontrollkästchen enthält.

Alle von ihnen sehen phänomenal aus und sollten sich in jede Art von Layout einfügen. Sie haben die volle Kontrolle, um Änderungen im CSS vorzunehmen, und das Beste daran ist, dass diese auch in allen gängigen Browsern funktionieren sollten.

7. Gestaltete barrierefreie Dropdowns

Hier ist eines der eher stilisierten Beispiele dafür, was Sie mit ausgewählten Menüs machen können. Dieses von Andy Fitzsimon erstellte Snippet basiert auf JavaScript für den Dropdown-Effekt und verwendet benutzerdefiniertes CSS für Farbverläufe und Pfeilsymbole.

Das Schöne ist, dass dieses Menü auch die No-JS-Funktion unterstützt, sodass es auch dann funktioniert, wenn JavaScript deaktiviert ist. Es heißt Graceful Degradation und ist der beste Freund eines Webentwicklers für Barrierefreiheit.

Dennoch führen diese ausgewählten Menüs die altmodischen Web 2.0-Verläufe aus, die möglicherweise nicht in ein Design für 2017 und darüber hinaus passen.

Aber das zeigt, dass Sie ausgewählte Menüs mit ein wenig Kreativität überall hin mitnehmen können. Und diese können überraschend gut funktionieren, wenn Sie sich durch das CSS hacken, um sie ein wenig anzupassen.

8. SVG-Symbolmenü

Standardauswahlmenüs haben das Pfeilsymbol an der Seite und nicht viel mehr. Mit ein wenig SVG-Magie können Sie dies in jedes andere Symbol Ihrer Wahl verwandeln.

Dieses benutzerdefinierte Menü hat ein eigenes Plus-Icon-Design, das mit einer reinen SVG-Datei ausgeführt wird. Wenn Sie klicken, um das Menü zu erweitern, wird es zu einem X-Symbol zum Schließen/Ausblenden animiert.

Ich habe so etwas noch nie zuvor gesehen und es zeigt, wie weit wir gekommen sind, um die Grenzen von Webbrowsern zu verschieben.

Leider läuft dies nicht auf dem nativen HTML-Select-Element. Es handelt sich um eine Sammlung von Listenelementen innerhalb eines div , sodass jedes Mal, wenn ein Wert ausgewählt wird, ein verborgenes Eingabefeld anvisiert werden müsste.

Glücklicherweise ist dieser Vorgang sehr einfach, wenn Sie also dieses Design auf Ihrer Website haben möchten, sollte es nicht viel Arbeit erfordern, um es zum Laufen zu bringen.

9. Wählen Sie Box-Experiment

Hier ist ein experimentelles Design, das mir wirklich aufgefallen ist. Der Demo-Vergleichsbildschirm zeigt, wie unterschiedlich dies zu normalen Auswahlmenüs ist und wie es die Benutzererfahrung verändert.

Wenn Sie zum ersten Mal tippen/klicken, um das Menü zu öffnen, gleitet es mit vollständigen Animationseffekten nach unten. Es wird jedoch nicht ausgeblendet, es sei denn, Sie klicken erneut auf das Menü, im Gegensatz zu typischen Auswahlmenüs, die ausgeblendet werden, wenn Sie auf eine andere Stelle auf der Seite klicken.

Ein wirklich gutes Beispiel für sauberes Design mit einfacher Animation. Aber wenn Ihnen die fehlende Click-to-Hide-Funktion nicht gefällt, ist diese Funktion möglicherweise ein Deal Breaker.

10. Dunkle & Helle Auswahl

Wenn Sie auch reines CSS lieben und elegante Auswahlen wünschen, sehen Sie sich diese Lösung an und versuchen Sie, eine davon als Startvorlage zu verwenden.

Beide setzen auf CSS-Verläufe für die Hintergründe und blenden die Dropdown-Menüs in die untere Farbe des Verlaufs ein. Dies verwendet kein JavaScript-Plugin, sodass Sie dies mit nur ein wenig CSS und etwas kreativem Aufwand erreichen können.

Beachten Sie, dass CSS selbst ziemlich kompliziert ist, daher ist es hilfreich, wenn Sie sich mit der Sprache auskennen. Aber für den Anfang ist dies eine der besten Möglichkeiten, die Sie finden werden, und es lässt auch viel Raum für Anpassungen.