La propriété 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
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display
: 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
/* Valeurs avec un mot-clé*/
list-style-image: none;
/* Valeurs pointant vers une image */
list-style-image: url('starsolid.gif');
/* Valeurs globales */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
Valeurs
url
- Emplacement de l'image à utiliser comme puce (cf.
<url>
pour plus de détails sur les valeurs possibles pour ce type). 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.
Syntaxe formelle
Exemples
CSS
ul {
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Lists Module Level 3 La définition de 'list-style-image' dans cette spécification. |
Version de travail | Propriété étendue pour supporter n'importe quel type <image> . |
CSS Level 2 (Revision 1) La définition de 'list-style-image' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | none |
---|---|
Applicabilité | éléments de liste |
Héritée | oui |
Valeur calculée | none ou l'image avec son URI rendue absolue |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
list-style
list-style-type
list-style-position
- La fonction
url()