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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées