webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

CSS Auswahlliste mit Checkboxen

| 1 Kommentar

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.

  1.  
  2. <select name="liste1" size="5" multiple="multiple">
  3. <option value="1">Listenpunkt eins</option>
  4. <option value="2">Listenpunkt zwei</option>
  5. ...
  6. </select>
  7.  

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!

  1.  
  2. <div style="overflow:auto; width:200px; height:100px; border-width: 2px; border-style: inset;">
  3. <input type="checkbox" name="cb1" id="cb1" value="1" >
  4. <label for="cb1">Listenpunkt eins</label>
  5. </div>
  6. <input type="checkbox" name="cb2" id="cb2" value="2" >
  7. <label for="cb2">Listenpunkt zwei</label>
  8. </div>
  9. </div>
  10.  

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:

  • queicherius

    Bei mir funktioniert es auch im FF^^