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.
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 detrad-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()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
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: 0.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