list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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

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 initialenone
Applicabilitééléments de liste
Héritéeoui
Valeur calculéeThe keyword none or the computed <image>
Type d'animationdiscrète

Syntaxe formelle

list-style-image = 
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-image
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi