Proprit CSS `list-style-type`

Baseline

Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

Voir la compatibilit complte
En savoir plus

La proprit CSS list-style-type permet de dfinir l'apparence de la puce d'un lment de liste (un cercle, un caractre, un compteur spcifique, etc.).

Exemple interactif

list-style-type: space-counter;

list-style-type: disc;

list-style-type: circle;

list-style-type: "\1F44D";

<section class="default-example" id="default-example">
  <div>
    <p>Missions remarquables de la NASA</p>
    <ul class="transition-all unhighlighted" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
    </ul>
  </div>
  <hr />
  <div class="note">
    <p>
      <code>space-counter</code> est dfini avec
      <a
        href="//developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@counter-style"
        target="_parent"
        ><code>@counter-style</code></a
      >
    </p>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Syntaxe

css

/* Liste partielle des mots-cls 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;

/* Valeurs de type <string> */
list-style-type: "-";

/* Un identifiant correspondant  une rgle @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: revert-layer;
list-style-type: unset;

La proprit list-style-type peut tre dfinie grce :

une valeur <custom-ident>.
une valeur symbols().
une valeur <string>.
le mot-cl none.

noter que :

Pour certains types, il est ncessaire d'avoir une police correspondante installe 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 prdfini :
symbols(): Dfinit un style de puce utilis.
<string>: La chane de caractres indique est utilise comme puce.
none: Aucun marqueur n'est affich.
disc: Un disque plein (la valeur par dfaut).
circle: Un cercle vide.
square: Un carr plein.
decimal: Des nombres dcimaux, commenant par 1.
cjk-decimal: Des nombres dcimaux Han.
decimal-leading-zero: Des nombres dcimaux complts 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 numrotation armnienne traditionnelle.
bengali, -moz-bengali: La numrotation bengalie.
cambodian/khmer: La numrotation 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 cleste .
cjk-ideographic: Identique trad-chinese-informal.
devanagari, -moz-devanagari: La numrotation devanagari.
ethiopic-numeric: La numrotation thiopienne.
georgian: La numrotation gorgienne traditionnelle.
gujarati, -moz-gujarati: La numrotation gujarati.
gurmukhi, -moz-gurmukhi: La numrotation gurmukhi.
hebrew: La numrotation hbraque traditionnelle.
hiragana: Le lettrage lexicographique hiragana.
hiragana-iroha: Le lettrage iroha hiragana.
japanese-formal: La numrotation japonaise formelle utilise pour les documents financiers ou lgaux. Les kanjis sont conus afin de ne pas pouvoir tre modifi pour ressembler un autre.
japanese-informal: La numrotation japonaise informelle.
kannada, -moz-kannada: La numrotation kannada.
katakana: Le lettrage lexicographique katakana.
katakana-iroha: Le lettrage iroha katakana.
korean-hangul-formal: La numrotation corenne hangul.
korean-hanja-formal: La numrotation formelle corenne Han.
korean-hanja-informal: La numrotation corenne hanja.
lao, -moz-lao: La numrotation laotienne.
lower-armenian: La numrotation armnienne en minuscules.
malayalam, -moz-malayalam: La numrotation Malayalam.
mongolian: La numrotation mongolienne.
myanmar, -moz-myanmar: La numrotation birmane.
oriya, -moz-oriya: La numrotation Oriya.
persian, -moz-persian: La numrotation perse.
simp-chinese-formal: La numrotation formelle en chinois simplifi.
simp-chinese-informal: La numrotation informelle en chinois simplifi.
tamil, -moz-tamil: La numrotation tamoule.
telugu, -moz-telugu: La numrotation Telugu.
thai, -moz-thai: La numrotation thalandaise.
tibetan: La numrotation tibtaine.
trad-chinese-formal: La numrotation formelle en chinois traditionnel.
trad-chinese-informal: La numrotation informelle en chinois traditionnel.
upper-armenian: La numrotation armnienne traditionnelle en majuscules.
disclosure-open: Un symbole indiquant qu'un contrle de rvlation (tel qu'un lment <details>) est dpli/rvl.
disclosure-closed: Un symbole indiquant qu'un contrle de rvlation (tel qu'un lment <details>) est repli/masqu.

Reportez-vous l'exemple Tous les styles de liste pour voir les valeurs ci-dessus en action. Les dtails de tous les styles de compteurs disponibles utiliss par diffrentes cultures travers le monde se trouvent dans Styles de compteurs prts l'emploi (angl.).

Extensions non-standards

Mozilla (Firefox) prend en charge quelques types prdfinis prcds du prfixe -moz-.

ethiopic-halehame : -moz-ethiopic-halehame
ethiopic-halehame-am : -moz-ethiopic-halehame-am
ethiopic-halehame-ti-er : -moz-ethiopic-halehame-ti-er
ethiopic-halehame-ti-et : -moz-ethiopic-halehame-ti-et
ethiopic-numeric : -moz-ethiopic-numeric
hangul : -moz-hangul
hangul-consonant : -moz-hangul-consonant
urdu : -moz-urdu

Voir le tableau de compatibilit pour savoir quels navigateurs prennent en charge quelle extension.

Description

La proprit list-style-type dfinit le marqueur (tel qu'un disque, un caractre ou un style de compteur personnalis) d'un lment de liste. Le marqueur est currentColor, identique la couleur calcule de l'lment auquel il s'applique.

Seuls quelques lments HTML (<li> et <summary>) ont une valeur par dfaut de display: list-item. Cependant, la proprit list-style-type peut tre applique tout lment dont la valeur de display est dfinie sur list-item.

Hritage du style de liste

Parce que list-style-type est hrit, il peut tre dfini sur un lment parent (gnralement <ol> ou <ul>) pour qu'il s'applique ses lments de liste. Cependant, les feuilles de style des agents utilisateurs dfinissent list-style-type sur les lments <ul>, <ol> et <menu>, de sorte que les listes imbriques utilisent ces valeurs par dfaut au lieu d'hriter de la valeur de la liste parente. Pour que les listes imbriques hritent de cette valeur, dfinissez list-style-type: inherit sur les lments de liste imbriqus.

Par exemple, dans des cas comme celui-ci :

html

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>
    Trois
    <ul>
      <li>Quatre</li>
      <li>Cinq</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

Lorsque qu'un style personnalis est dfini sur la liste externe :

css

body > ul {
  list-style-type: square;
}

La liste interne n'hrite pas du style personnalis moins que vous ne la dfinissiez sur inherit :

css

ul ul {
  list-style-type: inherit;
}

Accessibilit

Safari ne reconnait pas une liste ordonne ou non ordonne comme une liste dans l'arbre d'accessibilit si elle a une valeur list-style-type de none. Cela peut tre rsolu en ajoutant role="list" la balise d'ouverture de la liste. Pour en savoir plus sur ce point et sur les solutions possibles, voir list-style.

Dfinition formelle

Valeur initiale	`disc`
Applicabilit	lments de liste
Hrite	oui
Valeur calcule	comme dfini
Type d'animation	discrte

Syntaxe formelle

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

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

<counter-style-name> = 
  <custom-ident>  

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Cette syntaxe reflte le dernier standard selon CSS Counter Styles Level 3, CSS Images Module Level 4, CSS Images Module Level 5, CSS Lists and Counters Module Level 3, Selectors Level 4. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Dfinition 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>mme</li>
  <li>rsultat</li>
</ol>

CSS

css

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

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

Rsultat

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&nbsp;:</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

const container = document.querySelector(".container");
const list = document.querySelector("ol");

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

Rsultat

Nous ne sommes pas limites aux types de styles de liste dfinis sur cette page ou dans la spcification. La rgle @counter-style permet de crer des compteurs avec n'importe quel alphabet (angl.).