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.).

Exemple interactif

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: trad-chinese-informal;
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: revert;
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>
le mot-clé none.

À noter que :

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.

Valeurs

<custom-ident>: Un identifiant correspondant à la valeur d'un @counter-style ou à un style prédéfini :
symbols(): Définit un style de puce utilisé.
<string>: La chaîne de caractères indiquée sera utilisée comme puce.
none: Aucun marqueur n'est affiché.
disc: Un disque plein (la valeur par défaut).
circle: Un cercle vide.
square: Un carré plein.
decimal: Des nombres décimaux, commençant par 1.
cjk-decimal Expérimental: Des nombres décimaux Han.
decimal-leading-zero: Des nombres décimaux complétés par des 0.
lower-roman: Des chiffres romains en minuscules.
upper-roman: Des chiffres romains en majuscules.
lower-greek: Des lettres grecques en minuscules.
lower-alpha, lower-latin: Des lettres ASCII en minuscules.
upper-alpha, upper-latin: Des lettres ASCII en majuscules.
arabic-indic, -moz-arabic-indic: Des nombres arabo-indiens.
armenian: La numérotation arménienne traditionnelle.
bengali, -moz-bengali: La numérotation bengalie.
cambodian/khmer: La numérotation cambodgienne/khmer.
cjk-earthly-branch, -moz-cjk-earthly-branch: Des nombres ordinaux Han de la « branche terrestre ».
cjk-heavenly-stem, -moz-cjk-heavenly-stem: Des nombres ordinaux Han de la « souche céleste ».
cjk-ideographic Expérimental: Identique à trad-chinese-informal.
devanagari, -moz-devanagari: La numérotation devanagari.
ethiopic-numeric Expérimental: La numérotation éthiopienne.
georgian: La numérotation géorgienne traditionnelle.
gujarati, -moz-gujarati: La numérotation gujarati.
gurmukhi, -moz-gurmukhi: La numérotation gurmukhi.
hebrew Expérimental: La numérotation hébraïque traditionnelle.
hiragana Expérimental: Le lettrage lexicographique hiragana.
hiragana-iroha Expérimental: Le lettrage iroha hiragana.
japanese-formal Expérimental: La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.
japanese-informal Expérimental: La numérotation japonaise informelle.
kannada, -moz-kannada: La numérotation kannada.
katakana Expérimental: Le lettrage lexicographique katakana.
katakana-iroha Expérimental: Le lettrage iroha katakana.
korean-hangul-formal Expérimental: La numérotation coréenne hangul.
korean-hanja-formal Expérimental: La numérotation formelle coréenne Han.
korean-hanja-informal Expérimental: La numérotation coréenne hanja.
lao, -moz-lao: La numérotation laotienne.
lower-armenian Expérimental *: La numérotation arménienne en minuscules.
malayalam, -moz-malayalam: La numérotation Malayalam.
mongolian Expérimental: La numérotation mongolienne.
myanmar, -moz-myanmar: La numérotation birmane.
oriya, -moz-oriya: La numérotation Oriya.
persian Expérimental , -moz-persian: La numérotation perse.
simp-chinese-formal Expérimental: La numérotation formelle en chinois simplifié.
simp-chinese-informal Expérimental: La numérotation informelle en chinois simplifié.
tamil Expérimental , -moz-tamil: La numérotation tamoule.
telugu, -moz-telugu: La numérotation Telugu.
thai, -moz-thai: La numérotation thaïlandaise.
tibetan Expérimental *: La numérotation tibétaine.
trad-chinese-formal Expérimental: La numérotation formelle en chinois traditionnel.
trad-chinese-informal Expérimental: La numérotation informelle en chinois traditionnel.
upper-armenian Expérimental *: La numérotation arménienne traditionnelle en majuscules.
disclosure-open Expérimental: Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément <details>) est déplié/révélé.
disclosure-closed Expérimental: Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément <details>) est replié/masqué.

Extensions non-standards

Mozilla (Firefox), Blink (Chrome et Opera) et WebKit (Safari) fournissent certains types prédéfinis afin d'assurer la prise en charge de types de liste dans d'autres langues. Consultez le tableau de compatibilité pour l'extension à utiliser selon le navigateur.

-moz-ethiopic-halehame
-moz-ethiopic-halehame-am
ethiopic-halehame-ti-er, -moz-ethiopic-halehame-ti-er
ethiopic-halehame-ti-et, -moz-ethiopic-halehame-ti-et
hangul, -moz-hangul
hangul-consonant, -moz-hangul-consonant
urdu, -moz-urdu

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";
}

Définition formelle

Valeur initiale	`disc`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

list-style-type = 
  <counter-style>  |
  <string>         |
  none             

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )

Exemples

Définition de l'apparence des puces

HTML

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

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

CSS

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

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

Résultat

Tous les styles de liste

HTML

<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choisissez un style de liste :</h2>

<div class="container">

  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc">disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle">circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square">square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal">decimal
  </label>

  <label for="cjk-decimal">
    <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman
  </label>

  <label for="upper-roman">
    <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman
  </label>

  <label for="lower-greek">
    <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek
  </label>

  <label for="lower-alpha">
    <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian">armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali">bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian">cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic
  </label>

  <label for="devanagari">
    <input type="radio" id="devanagari" name="type" value="devanagari">devanagari
  </label>

  <label for="ethiopic-numeric">
    <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian">georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati">gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew">hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana">hiragana
  </label>

  <label for="hiragana-iroha">
    <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal
  </label>

  <label for="japanese-informal">
    <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada">kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana">katakana
  </label>

  <label for="katakana-iroha">
    <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer">khmer
  </label>

  <label for="korean-hangul-formal">
    <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao">lao
  </label>

  <label for="lower-armenian">
    <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam">malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian">mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar">myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya">oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian">persian
  </label>

  <label for="simp-chinese-formal">
    <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil">tamil
  </label>

  <label for="telegu">
    <input type="radio" id="telegu" name="type" value="telegu">telegu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai">thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan">tibetan
  </label>

  <label for="trad-chinese-formal">
    <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian
  </label>

  <label for="disclosure-open">
    <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open
  </label>

  <label for="disclosure-closed">
    <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed
  </label>

  <label for="-moz-ethiopic-halehame">
    <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame
  </label>

  <label for="-moz-ethiopic-halehame-am">
    <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul">hangul
  </label>

  <label for="hangul-consonant">
    <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu">urdu
  </label>

  <label for="-moz-ethiopic-halehame-ti-er">
    <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er
  </label>

  <label for="-moz-ethiopic-halehame-ti-et">
    <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et
  </label>

  <label for="-moz-hangul">
    <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul
  </label>

  <label for="-moz-hangul-consonant">
    <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant
  </label>

  <label for="-moz-urdu">
    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu
  </label>

</div>

CSS

ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: .4rem;
}

JavaScript

const container = document.querySelector(".container");
container.addEventListener("change", event => {
  const list = document.querySelector("ol");
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});

Résultat

Spécifications

Specification
CSS Lists and Counters Module Level 3 # text-markers
CSS Counter Styles Level 3 # extending-css2

Compatibilité des navigateurs

BCD tables only load in the browser