De list-styleeigenschap is een verkorte eigenschap die waarden instelt voor drie verschillende lijstgerelateerde eigenschappen in één declaratie:
ul ( list-style: || || ; )Hier is een voorbeeld van de syntaxis:
ul ( list-style: square outside none; )Wat hetzelfde zou zijn als de volgende handversie:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )In het kort: als er waarden worden weggelaten, keren ze terug naar hun oorspronkelijke staat.
Waarden voor list-style-type
De list-style-typeeigenschap definieert het type lijst door de inhoud van elke markering of opsommingsteken in de lijst in te stellen. Acceptabele zoekwoordwaarden voor list-style-typezijn onder meer:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN heeft een completere lijst. Niet-trefwoordwaarden zijn geïntroduceerd in CSS3 en beginnen enige ondersteuning te zien, zoals:
ul ( list-style-type: "→"; )De volgende demo bevat een groep ongeordende lijsten om elke zoekwoordwaarde te demonstreren:
De list-style-typeeigenschap is van toepassing op alle lijsten en op elk element dat is ingesteld op display: list-item.
De kleur van de lijstmarkering zal de berekende kleur van het element zijn (ingesteld via de coloreigenschap).
Waarden voor list-style-position
De list-style-positioneigenschap definieert waar de lijstmarkering moet worden geplaatst en accepteert een van twee waarden: insideof daarbuiten. Deze worden hieronder gedemonstreerd met de paddingverwijderd uit de lijsten en een linker rode rand toegevoegd:
Waarden voor list-style-image
De list-style-imageeigenschap bepaalt of de lijstmarkering is ingesteld met een afbeelding, en accepteert de waarde "geen" of een URL die naar de afbeelding verwijst:
ul ( list-style-image: url(images/bullet.png.webp); )Meer demo's
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Werken | Werken |
IE6 / 7 ondersteunt niet alle trefwoordwaarden voor list-style-typeen heeft ook een bug waarbij zwevende lijstitems hun lijstmarkering niet weergeven. Dit wordt opgelost door een achtergrondafbeelding (in plaats van list-style-image) op de lijstitems te gebruiken.