attribut LIST-STYLE-IMAGE

Rôle

L’attribut list-style-image permet de définir l’image à utiliser comme marqueur pour chaque élément d’une liste UL ou OL.

Il peut s’utiliser au niveau de la balise li ou au niveau de la balise ul ou ol

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.listStyleImage

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

li{
  list-style-image: url(//lorempixel.com/output/abstract-q-c-16-16-1.jpg);
}

– Le code HTML

<ul>
  <li>liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
</ul>

Résultat

Compatibilité

L’attribut list-style-image est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut list-style-type sont :

URL

Le chemin de l’image
Syntaxe :
list-style-image: url(monimage.jpg)

none

Valeur initiale : aucune image
Syntaxe :
list-style-image: none

initial

L’attribut est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un élément de liste peut ignorer le style imposé par une feuille de style qui le cible.
Syntaxe :
list-style-image : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
list-style-image : inherit

A voir aussi

list-style– list-style-position– list-style-type– list-style-image