Tipps und Tricks: Optionslisten mit Bullets
Listensymbole kennst Du von den Listen. Ähnliches ist durchaus auch in Listenfeldern möglich.
,
,
option:before { content:url("bulletrd.gif"); }
Dieses Beispiel fügt vor jedem Listeneintrag die Grafik bulletrd.gif ein.
Dies ermöglicht :before, eines von vielen Pseudoelementen.
:before legt einen Inhalt fest, der vor Elementen eingefügt wird.
content bestimmt den Inhalt, der mit :before eingefügt werden soll.
In diesem Fall soll es eine Grafik sein.
In diesem Beispiel ist im <div>-Tag das Attribut id mit
dem Wert div1 angegeben.
Im <head>-Bereich ist ein zentrales Stylesheet definiert. Auffallend ist
dabei das #div1.
Stylesheets für Elemente lassen sich nicht nur über Klassen, sondern auch über
das id-Attribut angeben.
Du setzt dafür zunächst ein #gefolgt von dem Wert des id-Attributs.
Der Unterschied zu den Klassen ist, dass die Formate nur einem Element im Dokumentenbaum
zugewiesen werden (dürfen).
Browser
Browser, wie der IE 5.0, die :before nicht kennen, zeigen das Listenfeld korrekt, aber ohne die Bullets an. Du kannst diesen Trick also problemlos verwenden, ohne befürchten zu müssen, dass Deine Seite auf einigen Browsern nicht funktioniert.