Get best of the week

Styling Select-Option (fast) ohne JavaScript

Das Styling einiger Standardelemente ist eine nicht triviale Aufgabe.

Natürlich kann ein guter Spezialist alles stilisieren, aber alles hängt von der Komplexität dieser Aktion ab.

Das Stilisieren von Optionsfeldern und Kontrollkästchen wird einige Zeit in Anspruch nehmen - die Idee, ein Etikett mit versteckten Eingaben zu gestalten, ist nicht neu und wird seit langem überall verwendet.

Um den Rest zu stilisieren, gibt es JavaScript.

Heute möchte ich Ihnen erzählen, wie einfach es ist, Dropdown-Listen mit minimalem JavaScript-Code (von 0 bis 26 Zeilen) und minimalem zusätzlichen HTML-Markup zu erstellen.

Einfache Auswahl ohne JavaScript (fast)

Neulich musste ich, wie so oft, eine Dropdown-Liste erstellen. Es wurde jedoch nur in der mobilen Version zu einer Dropdown-Liste, bevor es sich wie die gewöhnlichste Gruppe von Optionsfeldern verhielt.

Als ich fast fertig war, eine andere gruselige Konstruktion zu schreiben, die den unglücklichen Select ersetzen sollte, hatte ich eine Frage:

Warum?

Normalerweise führt diese Frage zu weisem Aufschub, einem Umdenken im Leben usw., aber diesmal ging etwas schief und ich erkannte, dass die Frage wirklich gut und vor allem nützlich war.


Ein kleines Bildungsprogramm:

Also, sowohl für diejenigen, die sich im Tank befinden, als auch für diejenigen, denen die Dropdown-Listen so viel Schmerz bereiten, dass sie beschlossen haben, sie als Albtraum zu vergessen, werde ich Sie ein wenig (wirklich) daran erinnern, was es ist.

Dropdown-Listen bestehen aus 2 Hauptelementen :

  1. Wählen Sie - Container für die gesamte Liste
  2. Option - Listenelement

Manchmal wird auch OptGroup verwendet (eine Gruppe von Listenelementen), aber die Implementierung bleibt bisher in JavaScript.

Die Hauptfunktionalität der Dropdown-Liste besteht darin, Informationen zu den ausgewählten Elementen an den Server zu senden.

Der Vollständigkeit halber finden Sie hier eine Liste der Elementattribute (damit Sie abschätzen können, wie viele davon implementiert werden):

  1. Wählen Sie - deaktiviert , Formular , Mehrfach , Name , Erforderlich , Größe
  2. Option - deaktiviert , Beschriftung , ausgewählt , Wert

Vielleicht beenden wir dies mit der Beschreibung und fahren mit der Implementierung fort .


Daher wurden bereits viele Wörter geschrieben - näher am Code:

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Wofür ist dieser Code gut? (Alles,

worauf während der Erklärung verzichtet werden kann, wurde speziell entfernt.) Beachten Sie, welche Elemente aus der Auswahl- und Optionsfunktion aufgrund der Verwendung von Eingabe + Beschriftung automatisch möglich geworden sind:

  1. Wählen Sie - Formular, Name, erforderlich
  2. Option - deaktiviert, Beschriftung, ausgewählt, Wert

Und das ist alles, was noch umgesetzt werden muss:

  1. Wählen Sie - deaktiviert, mehrere, Größe
  2. Option - vollständig implementiert

Nur durch Hinzufügen der Input + Label-Bundles haben wir die Liste der erforderlichen Funktionen von 10 auf 3 Punkte reduziert. Nicht schlecht, aber das ist nicht das Ende, oder?

So implementieren Sie das Element Select.multiple (Multiple Choice) wie folgt :

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Wir ändern einfach die Art der Eingänge von Radio zu Checkbox und erhalten ein fast vollständiges Analogon von mehreren .

Der Unterschied besteht darin, dass Sie für die Mehrfachauswahl die Strg-Taste nicht gedrückt halten müssen (wenn jemand die Funktionalität vollständig imitieren möchte - JavaScript hilft dabei).

Was ist übrig?

  1. Wählen Sie - deaktiviert, Größe
  2. Option - vollständig implementiert

Nun, sowohl Select.disabled als auch Select.size sind mit CSS extrem einfach zu implementieren:

  • Select.size - welche Größe Sie einstellen werden. Sie müssen nur den Container hinzufügen.
  • Select.disabled - Für den Container müssen Sie Zeigerereignisse hinzufügen : keine , um die Reaktion auf Benutzeraktionen (Hover, Klicks usw.) abzubrechen. Nun , Sie können es ein wenig transparent machen.

Die Hauptfunktionalität ist also. Was fehlt?

Sie müssen auch die hinzufügen Header zum automatischen Vervollständigung für das Dropdown-Menü mit der einzigen Wahl, und es wird auch sein , ein Problem , wenn das Formulars Zurücksetzen ( Reset - Taste ), weil Der Titel wird nicht zurückgesetzt. Aber auch das ist vollständig lösbar (mit JavaScript).


Und jetzt - Beispiele:

Eine kleine Implementierung (Dropdown-Menü mit einer einzigen Auswahl):


Und noch ein bisschen mehr (kein Dropdown-Menü mit Mehrfachauswahl):


Bonus: Ich weiß nicht, warum ich das getan habe, aber ... ein Dropdown-Menü mit einer einzigen Auswahl und einem CSS-basierten Header-Reset:





Warum wird das benötigt?

Aufgrund der Tatsache, dass nach den Kommentaren nicht jeder versteht, warum dieser Code nützlich sein wird, halte ich es für notwendig, einige Klarstellungen vorzunehmen.

Beim Stylen von Dropdown-Listen des Formulars:
<select>
  <option> 1</option>
  <option> 2</option>
</select>

Es gibt schwerwiegende Einschränkungen beim Styling. Daher werden sie durch einfache Listen ersetzt:
<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

mit dem alle notwendigen Funktionen mit JavaScript aufgehängt werden.

Da die Listen anfangs in keiner Weise mit Formularen interagieren , verursacht dies Probleme.

Es ist nicht nur notwendig, alle grundlegenden Funktionen zu implementieren:

  • Schaltpunkte und deren Wechselwirkung
  • Zustand (aktiviert, deaktiviert)
  • Bindung an das Formular und Senden von Daten an den Server
  • Initialisierung der Anfangsdaten (automatisches Ausfüllen)
  • Formular zurücksetzen (wenn Sie auf die Schaltfläche "Zurücksetzen" klicken, muss die Liste während der Initialisierung auf den Status zurückgesetzt werden)


Wenn in JavaScript etwas kaputt geht, spielt dies keine Rolle, da das Skript nicht geladen wurde, ein Fehler aufgetreten ist und Änderungen vorgenommen wurden. Wenn ein Problem auftritt, wird die Dropdown-Liste zu ... etwas, das wie eine Dropdown-Liste aussieht, aber nicht funktioniert.
Allgemein. Auf keinen Fall.

Für den Benutzer sieht es folgendermaßen aus: Es gibt eine Dropdown-Liste, mit der Sie jedoch nicht arbeiten können.

Für den Server wird dies noch „lustiger“ aussehen - es ist ein Formular eingetroffen, in dem nicht genügend Daten vorhanden sind. Es ist gut, dass eine solche Situation im Voraus während der Entwicklung vorhergesehen wurde ... Immerhin war es vorhergesehen, oder?


Vorteile der resultierenden Lösung:

  • ( ), . JavaScript ( ). , — . , — / — html ( JS), .
  • . , , ( ). ul — li , .



(. , , JavaScript' / ):

  • tab
  • ( select -)
  • ( , )
  • select ( select . select)
  • , (JS )
  • ( OptGroup) (, )


Wie Sie sehen können, ist keine der oben genannten Nachteile kritisch für die überwiegende Mehrheit der Listen und bei Bedarf benutzt JavaScript implementiert, und deshalb ...


Willkommen in der Welt, in der Ihre Bibliotheken für die Gestaltung von Listen mit Auswahloptionen etwas kleiner werden und die Arbeit mit diesen Listen ohne Bibliotheken fast komfortabel ist!



UPD: Wie sich herausstellte, funktioniert das erforderliche Attribut bei Kontrollkästchen nicht ordnungsgemäß und muss auch mit JavaScript emuliert werden (derzeit sind alle als erforderlich markierten Kontrollkästchen obligatorisch, und nur sie).

More articles:


All Articles