list-style-type

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

css
/* 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.

css
ul {
  list-style-type: none;
}

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

Définition formelle

Valeur initialedisc
Applicabilitééléments de liste
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrè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()> |
<src()>

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

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

Exemples

Définition de l'apparence des puces

HTML

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

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

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

css
ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}

JavaScript

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-type
afar
Non-standard
amharic
Non-standard
amharic-abegede
Non-standard
arabic-indic
armenian
asterisks
Non-standard
bengali
binary
Non-standard
cambodian
circle
cjk-decimal
cjk-earthly-branch
cjk-heavenly-stem
cjk-ideographic
decimal
decimal-leading-zero
devanagari
disc
disclosure-closed
disclosure-open
ethiopic
Non-standard
ethiopic-abegede
Non-standard
ethiopic-abegede-am-et
Non-standard
ethiopic-abegede-gez
Non-standard
ethiopic-abegede-ti-er
Non-standard
ethiopic-abegede-ti-et
Non-standard
ethiopic-halehame
Non-standard
ethiopic-halehame-aa-er
Non-standard
ethiopic-halehame-aa-et
Non-standard
ethiopic-halehame-am
Non-standard
ethiopic-halehame-am-et
Non-standard
ethiopic-halehame-gez
Non-standard
ethiopic-halehame-om-et
Non-standard
ethiopic-halehame-sid-et
Non-standard
ethiopic-halehame-so-et
Non-standard
ethiopic-halehame-ti-er
Non-standard
ethiopic-halehame-ti-et
Non-standard
ethiopic-halehame-tig
Non-standard
ethiopic-numeric
footnotes
Non-standard
georgian
gujarati
gurmukhi
hangul
Non-standard
hangul-consonant
Non-standard
hebrew
hiragana
hiragana-iroha
japanese-formal
japanese-informal
kannada
katakana
katakana-iroha
khmer
korean-hangul-formal
korean-hanja-formal
korean-hanja-informal
lao
lower-alpha
lower-armenian
lower-greek
lower-hexadecimal
Non-standard
lower-latin
lower-norwegian
Non-standard
lower-roman
malayalam
mongolian
myanmar
none
octal
Non-standard
oriya
oromo
Non-standard
persian
sidama
Non-standard
simp-chinese-formal
simp-chinese-informal
somali
Non-standard
square
<string>
symbols()
tamil
telugu
thai
tibetan
tigre
Non-standard
tigrinya-er
Non-standard
tigrinya-er-abegede
Non-standard
tigrinya-et
Non-standard
tigrinya-et-abegede
Non-standard
trad-chinese-formal
trad-chinese-informal
upper-alpha
upper-armenian
upper-greek
Non-standard
upper-hexadecimal
Non-standard
upper-latin
upper-norwegian
Non-standard
upper-roman
urdu
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi