Normale Listen wie die folgende kennt wahrscheinlich jeder.

Sie lassen sich leicht mit HTML erstellen und machen es in Formularen möglich, einen oder auch mehrere der enthaltenen Listenpunkte auszuwählen. Die Liste setzt sich aus dem select Tag und mehreren option Tags zusammen. Das Attribut size gibt an, wie viele der Listenpunkte angezeigt werden sollen. multiple macht es möglich, gleichzeitig mehrere der Listenpunkte auszuwählen.


Als ich jedoch nach einem Weg gesucht habe, Mehrfachauswahlen auf einem anderen Weg bereitzustellen, bin ich auf die folgende Lösung gekommen. Sie bedient sich CSS Elemente und funktioniert nur im Explorer. Alle anderen Browser zeigen hier nur eine Tabelle mit den Checkboxen an. Jedoch möchte ich sie euch trotzdem vorstellen, da sie zeigt wie powervoll CSS sein kann. Hier also erst einmal die besagte Auswahlliste:











 

Jetzt fragt ihr euch sicherlich, wie eine solche Auswahlliste erstellt werden kann, doch das ist im Grunde gar nicht so schwer. Alles was wir brauchen ist ein div Tag mit dem style Attributen width und height um die Größe festzulegen sowie dem Attribut overflow:auto um automatisch einen Scrollbalken erscheinen zu lassen, falls mehr Checkboxen vorhanden sind, als in das div Tag mit der vorgegebenen Größe passen.
Wer möchte kann dem Ganzen auch noch mit border-width:2px und border-style:inset den Eindruck einer echten Auswahlliste geben.

In diesem div Tag erstellen wir nun die einzelnen Checkboxen und jeweils einer Label Beschriftung. Aber seht euch einfach den Code an!

Ihr könnt natürlich nach belieben die Breite und Höhe anpassen sowie anstatt von Checkboxen auch Radiobuttons verwenden oder dem Ganzen ein völlig anderes Aussehen geben. Der Phantasie sind keine Grenzen gesetzt.

Diese Artikel könnten dich auch interessieren:

1 thought on “CSS Auswahlliste mit Checkboxen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Back to Top