list-style-image - CSS : Feuilles de style en cascade

La propriété list-style-image définit l'image utilisée comme puce devant les éléments de listes. On peut également utiliser la propriété raccourcie list-style.

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display: list-item;}}). Par défaut, cela inclut les éléments <li>. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol> ou à <ul>).

Syntaxe

/* Valeurs avec un mot-clé*/
list-style-image: none;

/*  Valeurs pointant vers une image */
list-style-image: url('starsolid.gif');

/* Valeurs globales */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;

Valeurs

url: Emplacement de l'image à utiliser comme puce (cf. <url> pour plus de détails sur les valeurs possibles pour ce type).
none: Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec list-style-type sera utilisé à la place.

Syntaxe formelle

<url> | none

Exemples

CSS

ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}

HTML

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

Résultat

Spécifications

Spécification	État	Commentaires
CSS Lists Module Level 3 La définition de 'list-style-image' dans cette spécification.	Version de travail	Propriété étendue pour supporter n'importe quel type `<image>`.
CSS Level 2 (Revision 1) La définition de 'list-style-image' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`none`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	`none` ou l'image avec son URI rendue absolue
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser