Die list-styleEigenschaft ist eine Kurzform, die Werte für drei verschiedene listenbezogene Eigenschaften in einer Deklaration festlegt:
ul ( list-style: || || ; )Hier ist ein Beispiel für die Syntax:
ul ( list-style: square outside none; )Welches wäre das gleiche wie die folgende Langhandversion:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )Wenn in der Kurzform Werte weggelassen werden, kehren sie in ihren Ausgangszustand zurück.
Werte für list-style-type
Die list-style-typeEigenschaft definiert den Listentyp, indem der Inhalt jeder Markierung oder jedes Aufzählungszeichens in der Liste festgelegt wird. Akzeptable Keyword-Werte für list-style-typeinclude:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN hat eine vollständigere Liste. Nicht-Keyword-Werte wurden in CSS3 eingeführt und werden zunehmend unterstützt, z. B.:
ul ( list-style-type: "→"; )Die folgende Demo enthält eine Gruppe ungeordneter Listen, um jeden Keyword-Wert zu demonstrieren:
Die list-style-typeEigenschaft gilt für alle Listen und für jedes Element, auf das festgelegt ist display: list-item.
Die Farbe der Listenmarkierung ist unabhängig von der berechneten Farbe des Elements (über die colorEigenschaft festgelegt).
Werte für list-style-position
Die list-style-positionEigenschaft definiert, wo die Listenmarkierung positioniert werden soll, und akzeptiert einen von zwei Werten: insideoder außerhalb. Diese werden unten gezeigt, paddingindem sie aus den Listen entfernt und ein linker roter Rand hinzugefügt wird:
Werte für list-style-image
Die list-style-imageEigenschaft bestimmt, ob die Listenmarkierung mit einem Bild festgelegt ist, und akzeptiert den Wert "none" oder eine URL, die auf das Bild verweist:
ul ( list-style-image: url(images/bullet.png.webp); )Weitere Demos
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |
IE6 / 7 unterstützt nicht alle Schlüsselwortwerte für list-style-typeund hat auch einen Fehler, bei dem schwebende Listenelemente ihre Listenmarkierung nicht anzeigen. Dies wird behoben, indem ein Hintergrundbild (anstelle von list-style-image) für die Listenelemente verwendet wird.