list-style-image

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La propriété CSS 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.

Exemple interactif

list-style-image: url("/shared-assets/images/examples/rocket.svg");

list-style-image: none;

<section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all unhighlighted" id="example-element"> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div> </section>

.default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; }

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display vaut 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

css

/* Valeurs avec un mot-clé*/ list-style-image: none; /* Valeurs pointant vers une image */ list-style-image: url("star-solid.gif"); /* Valeurs avec une image */ list-style-image: linear-gradient(to left bottom, red, blue); /* Valeurs globales */ list-style-image: inherit; list-style-image: initial; list-style-image: revert; list-style-image: unset;

Valeurs

<image>: Une valeur représentant une image valide, qui sera utilisée comme puce.
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.

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	The keyword `none` or the computed <image>
Type d'animation	discrète

Syntaxe formelle

list-style-image = 
 <image> |
 none 

<image> = 
 <url> |
 <image()> |
 <image-set()> |
 <cross-fade()> |
 <element()> |
 <gradient> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color>? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<image-tags> = 
 ltr |
 rtl 

<image-src> = 
 <url> |
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ]? 

<cf-image> = 
 [ <image> | <color> ] &&
 <percentage [0,100]>? 

<id-selector> = 
 <hash-token>

Exemples

Utiliser une URL

HTML

html

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

CSS

css

ul { list-style-image: url("star-solid.gif"); }

Résultat

Utiliser un dégradé

HTML

html

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

CSS

css

ul { font-size: 200%; list-style-image: linear-gradient(to left bottom, red, blue); }

Résultat

Spécifications

Specification
CSS Lists and Counters Module Level 3 # image-markers

Compatibilité des navigateurs

Voir aussi

list-style shorthand
list-style-type property
list-style-position property
::marker pseudo-element
Le module des listes et compteurs CSS
Le module des styles de compteur CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨9 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content