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
<url> | none
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 |
Média | visuel |
Valeur calculée | none ou l'image avec son URI rendue absolue |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style-image | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 4 | Opera Support complet 7 | Safari Support complet 1 | WebView Android Support complet 1 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet 10.1 | Safari iOS Support complet 1 | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
Voir aussi
list-style
list-style-type
list-style-position
- La fonction
url()