Propriété CSS list-style-image

La propriété list-style-image permet d'utiliser l'image comme un puce devant les éléments de liste.

Si la hauteur et la larguer de l'image sont héritées, la largeur et la hauteur utilisées sont la largeur et la hauteur héritées.

La propriété list-style-image est appliquée aux éléments de liste et les éléments avec display définie à "list-item". Par défaut, cela comprend les éléments <li>. Ça peut egalement être défini aux éléments parents: <ol> ou <ul>.

La propriété list-style-type sera utilisée quand l'image n'est pas disponible à être montrée.

Valeur initiale	none
Appliquée à	Éléments de liste.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.listStyleImage = "url("image.jpg")";

Syntaxe

list-style-image: none | url | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
      list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-image</h2>
    <ul>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, où la source url de l'image est attachée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-image</h2>
    <ul>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Aucune image ne sera pas utilisée comme puce. Au lieu de l'image, le marqueur de liste définie avec list-style-type sera utilisée. C'est la valeur initiale de cette propriété.
url	Utilisée pour donner la source de l'image qui sera utilisée comme puce des éléments de la liste.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.