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-typesera utilisé à la place.
Syntaxe formelle
<url> | none
Exemple
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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | 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 Oui | Edge Mobile Support complet 12 | Firefox Android Support complet 4 | Opera Android Support complet 6 | Safari iOS Support complet 1 | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet