list-style-image

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
Média	visuel
Valeur calculée	`none` ou l'image avec son URI rendue absolue
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`list-style-image`	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 1	IE Support complet 4	Opera Support complet 7	Safari Support complet 1	WebView Android Support complet 1	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 10.1	Safari iOS Support complet 1	Samsung Internet Android Support complet Oui

Légende

Support complet: Support complet