La list-stylepropriété est une propriété abrégée qui définit les valeurs de trois propriétés liées à une liste différentes dans une déclaration:
ul ( list-style: || || ; )Voici un exemple de syntaxe:
ul ( list-style: square outside none; )Ce qui serait le même que la version longue main suivante:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )En résumé, si des valeurs sont omises, elles reviendront à leur état initial.
Valeurs pour list-style-type
La list-style-typepropriété définit le type de liste en définissant le contenu de chaque marqueur, ou puce, sur la liste. Les valeurs de mots clés acceptables pour list-style-typeincluent:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN a une liste plus complète. Les valeurs non-mot-clé ont été introduites dans CSS3 et commencent à voir un certain support, comme:
ul ( list-style-type: "→"; )La démonstration suivante comprend un groupe de listes non ordonnées pour illustrer la valeur de chaque mot-clé:
La list-style-typepropriété s'applique à toutes les listes et à tout élément défini sur display: list-item.
La couleur du marqueur de liste sera quelle que soit la couleur calculée de l'élément (définie via la colorpropriété).
Valeurs pour list-style-position
La list-style-positionpropriété définit où positionner le marqueur de liste et accepte l'une des deux valeurs suivantes: insideou à l'extérieur. Ceux-ci sont illustrés ci-dessous avec le paddingretrait des listes et une bordure rouge à gauche ajoutée:
Valeurs pour list-style-image
La list-style-imagepropriété détermine si le marqueur de liste est défini avec une image et accepte la valeur «aucun» ou une URL qui pointe vers l'image:
ul ( list-style-image: url(images/bullet.png.webp); )Plus de démos
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |
IE6 / 7 ne prend pas en charge toutes les valeurs de mot-clé pour list-style-typeet a également un bogue où les éléments de liste flottante n'affiche pas leur marqueur de liste. Ce problème est résolu en utilisant une image d'arrière-plan (au lieu de list-style-image) sur les éléments de la liste.