list-style-type

La propriété list-style-type permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

La couleur de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.

Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a display: list-item;. Cela inclut par défaut les éléments <li> et <summary>. Il est possible de l'utiliser pour d'autres éléments si on utilise display: list-item sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement <ol> ou <ul>) afin qu'elle s'applique à l'ensemble des éléments fils.

Syntaxe

/* Liste partielle des mots-clés utilisables */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* Une chaîne de caractères */
/* Type <string>            */
list-style-type: '-';

/* Un identifiant correspondant à */
/* une règle @counter-style       */
list-style-type: custom-counter-style;

/* Valeur avec un mot-clé */
list-style-type: none;

/* Valeurs globales */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

La propriété list-style-type peut être définie grâce à :

• une valeur <custom-ident>
• une valeur symbols()
• une valeur <string>
• au mot-clé none

Valeurs

symbols()

Définit un style de puce utilisé.

none

Aucun marqueur n'est affiché.

<string>

La chaîne de caractères indiquée sera utilisée comme puce

<custom-ident>

Un identifiant correspondant à la valeur d'un @counter-style ou à un style prédéfini :

disc

• Un disque plein (la valeur par défaut)

circle

• Un cercle vide

square

• Un carré plein

decimal

• Des nombres en base 10
• Commençant par 1

cjk-decimal

• Nombres décimaux Han
• E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇

decimal-leading-zero

• Nombres en base 10
• Avec des 0 devant
• E.g. 01, 02, 03, … 98, 99

lower-roman

• Nombres romains minuscules
• Par exemple i, ii, iii, iv, v…

upper-roman

• Nombres romains en majuscules
• Par exemple I, II, III, IV, V…

lower-greek

• Lettres grecques minuscules
• alpha, beta, gamma…
• Par exemple α, β, γ…

lower-alpha

lower-latin

• Lettres ASCII en minuscules
• Par exemple a, b, c, … z
• lower-latin n'est pas pris en charge par les versions avant IE7
• Voir le tableau de compatibilité

upper-alpha

upper-latin

• Lettres ASCII en majuscules
• Par exemple A, B, C, … Z
• upper-latin n'est pas pris en charge par les versions avant IE7

arabic-indic

-moz-arabic-indic

• Exemple

armenian

• Système de numérotation arménien
• (ayb/ayp, ben/pen, gim/keem…

bengali

-moz-bengali

• Exemple

cambodian *

• Exemple
• est un synonyme pour khmer

cjk-earthly-branch

-moz-cjk-earthly-branch

• Exemple

cjk-heavenly-stem

-moz-cjk-heavenly-stem

• Exemple

cjk-ideographic

• Identique à trad-chinese-informal
• E.g. 一萬一千一百一十一

devanagari

-moz-devanagari

• Exemple

ethiopic-numeric

• Exemple

georgian

• Système de numérotation géorgien
• Par exemple an, ban, gan, … he, tan, in…

gujarati

-moz-gujarati

• Exemple

gurmukhi

-moz-gurmukhi

• Exemple

hebrew

• Système de numérotation hébreux

hiragana

• あ, い, う, え, お, か, き , …
• (Japonais)

hiragana-iroha

• い, ろ, は, に, ほ, へ, と  …
• Iroha est l'ancien ordre japonais pour les syllabes.

japanese-formal

• Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.
• E.g., 壱萬壱阡壱百壱拾壱
• Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres

japanese-informal

• Système de numérotation japonais informel

kannada

-moz-kannada

• Exemple

katakana

• ア, イ, ウ, エ, オ, カ, キ, …
• (Japonais)

katakana-iroha

• イ, ロ, ハ, ニ, ホ, ヘ, ト, …
• Iroha correspond à l'ancien ordre japonais pour les syllabes.

khmer

-moz-khmer

• Exemple

korean-hangul-formal

• Système de numérotation coréen hangul .
• E.g., 일만 일천일백일십일

korean-hanja-formal

• Système de numérotation formel coréen Han.
• E.g. 壹萬 壹仟壹百壹拾壹

korean-hanja-informal

• Système de numérotation coréen hanja numbering.
• E.g., 萬 一千百十一

lao

-moz-lao

• Exemple

lower-armenian *

• Exemple

malayalam

-moz-malayalam

• Exemple

mongolian

• Exemple

myanmar

-moz-myanmar

• Exemple

oriya

-moz-oriya

• Exemple

persian

-moz-persian

• Exemple

simp-chinese-formal

• Système de numérotation formel chinois simplifié.
• E.g. 壹万壹仟壹佰壹拾壹

simp-chinese-informal

• Système de numérotation informel chinois simplifié.
• E.g. 一万一千一百一十一

tamil

-moz-tamil

• Exemple

telugu

-moz-telugu

• Exemple

thai

-moz-thai

• Exemple

tibetan *

• Exemple

trad-chinese-formal

• Système de numérotation formel chinois traditionnel.
• E.g. 壹萬壹仟壹佰壹拾壹

trad-chinese-informal

• Système de numérotation informel chinois traditionnel.
• E.g. 一萬一千一百一十一

upper-armenian *

• Exemple

disclosure-open

• Symbole indiquant qu'un widget (comme <details>) est ouvert.

disclosure-closed

• Symbole indiquant qu'un widget (comme <details>) est fermé.

Extensions non-standards

D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.

-moz-ethiopic-halehame

• Exemple

-moz-ethiopic-halehame-am

• Exemple

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

• Exemple

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

• Exemple

hangul

-moz-hangul

• Exemple
• Exemple
• Exemple

hangul-consonant

-moz-hangul-consonant

• Exemple
• Exemple
• Exemple

urdu

-moz-urdu

• Exemple

Syntaxe formelle

<counter-style> | <string> | none
où 
<counter-style> = <counter-style-name> | symbols()
où 
<counter-style-name> = <custom-ident>

Exemples

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* on peut aussi utiliser la propriété raccourcie */
/* "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

<ol class="normal">Liste 1
  <li>Coucou</li>
  <li>Monde</li>
  <li>Comment ça va ?</li>
</ol>

<ol class="shortcut">Liste 2
  <li>On a</li>
  <li>le</li>
  <li>même</li>
  <li>résultat</li>
</ol>

Résultat

Accessibilité

Le lecteur d'écran VoiceOver n'annonce pas, incorrectement, les listes non ordonnées lorsque list-style-type:none leur est appliqué. Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

ul {
  list-style-type: none;
}

ul li::before {
  content: "\200B";
}

• VoiceOver et list-style-type: none – Unfettered Thoughts (en anglais)
• Comprendre les règles WCAG 1.3
• Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 (en anglais)

Notes

• Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.
• Pour des raisons historiques, cjk-ideographic est synonyme de trad-chinese-informal.

Spécifications

Compatibilité des navigateurs

Voir aussi

• list-style
• list-style-image
• list-style-position