The list-style-type
property specifies the appearance of a list item element.
/* Partial list of types */ 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; /* A <string> */ list-style-type: '-'; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset;
Because the <li>
element is the only property that defaults to display:list-item
, this property is usually applied to an <li>
element, but it may be applied to any element whose display
value is list-item
.
Initial value | disc |
---|---|
Applies to | list items |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The color of the marker will be the same as the computed color of the element it applies to.
Note: This property is applied to list items, i.e. elements with
by default this includes display
: list-item;<li>
elements. Because this property is inherited, it can be set on the parent element (normally <ol>
or <ul>
) to let it apply to all list items.
Syntax
The list-style-type property may be defined as any one of:
- a
<custom-ident>
value - a
symbols()
value - a
<string>
value - the keyword
none
.
Values
<custom-ident>
- A identifier matching the value of a
@counter-style
or one of the predefined styles:
symbols()
- Defines an anonymous style of the list.
<string>
- The specified string will be used as the item's marker.
none
- No item marker is shown.
disc
-
- A filled circle (default value)
circle
-
- A hollow circle
square
-
- A filled square
decimal
-
- Decimal numbers
- Beginning with 1
cjk-decimal
-
- Han decimal numbers
- E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero
-
- Decimal numbers
- Padded by initial zeros
- E.g. 01, 02, 03, … 98, 99
lower-roman
-
- Lowercase roman numerals
- E.g. i, ii, iii, iv, v…
upper-roman
-
- Uppercase roman numerals
- E.g. I, II, III, IV, V…
lower-greek
-
- Lowercase classical Greek
- alpha, beta, gamma…
- E.g. α, β, γ…
lower-alpha
lower-latin
-
- Lowercase ASCII letters
- E.g. a, b, c, … z
lower-latin
is unsupported in IE7 and earlier- See Browser compatibility section.
upper-alpha
upper-latin
-
- Uppercase ASCII letters
- E.g. A, B, C, … Z
upper-latin
is unsupported in IE7 and earlier
arabic-indic
-moz-arabic-indic
-
- Example
armenian
-
- Traditional Armenian numbering
- (ayb/ayp, ben/pen, gim/keem…
bengali
-moz-bengali
-
- Example
cambodian
*-
- Example
- Is a synonym for
khmer
cjk-earthly-branch
-moz-cjk-earthly-branch
-
- Example
cjk-heavenly-stem
-moz-cjk-heavenly-stem
-
- Example
cjk-ideographic
-
- Identical to
trad-chinese-informal
- E.g. 一萬一千一百一十一
- Identical to
devanagari
-moz-devanagari
-
- Example
ethiopic-numeric
-
- Example
georgian
-
- Traditional Georgian numbering
- E.g. an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
-
- Example
gurmukhi
-moz-gurmukhi
-
- Example
hebrew
-
- Traditional Hebrew numbering
hiragana
-
- a, i, u, e, o, ka, ki, …
- (Japanese)
hiragana-iroha
-
- i, ro, ha, ni, ho, he, to, …
- Iroha is the old japanese ordering of syllabs.
japanese-formal
-
- Japanese formal numbering to be used in legal or financial document.
- E.g., 壱萬壱阡壱百壱拾壱
- The kanjis are designed so that they can't be modified to look like another correct one
japanese-informal
-
- Japanese informal numbering
kannada
-moz-kannada
-
- Example
katakana
-
- A, I, U, E, O, KA, KI, …
- (Japanese)
katakana-iroha
-
- I, RO, HA, NI, HO, HE, TO, …
- Iroha is the old japanese ordering of syllabs.
khmer
-moz-khmer
-
- Example
korean-hangul-formal
-
- Korean hangul numbering.
- E.g., 일만 일천일백일십일
korean-hanja-formal
-
- Formal Korean Han numbering.
- E.g. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal
-
- Korean hanja numbering.
- E.g., 萬 一千百十一
lao
-moz-lao
-
- Example
lower-armenian
*-
- Example
malayalam
-moz-malayalam
-
- Example
mongolian
-
- Example
myanmar
-moz-myanmar
-
- Example
oriya
-moz-oriya
-
- Example
persian
-moz-persian
-
- Example
simp-chinese-formal
-
- Simplified Chinese formal numbering.
- E.g. 壹万壹仟壹佰壹拾壹
simp-chinese-informal
-
- Simplified Chinese informal numbering.
- E.g. 一万一千一百一十一
tamil
-moz-tamil
-
- Example
telugu
-moz-telugu
-
- Example
thai
-moz-thai
-
- Example
tibetan
*-
- Example
trad-chinese-formal
-
- Traditional Chinese formal numbering.
- E.g. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal
-
- Traditional Chinese informal numbering.
- E.g. 一萬一千一百一十一
upper-armenian
*-
- Example
disclosure-open
-
- Symbol indicating that a disclosure widget such as
<details>
is opened.
- Symbol indicating that a disclosure widget such as
disclosure-closed
-
- Symbol indicating that a disclosure widget, like
<details>
is closed.
- Symbol indicating that a disclosure widget, like
Non-standard extensions
A few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.
-moz-ethiopic-halehame
-
- Example
-moz-ethiopic-halehame-am
-
- Example
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
-
- Example
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
-
- Example
hangul
-moz-hangul
-
- Example
- Example
- Example
hangul-consonant
-moz-hangul-consonant
-
- Example
- Example
- Example
urdu
-moz-urdu
-
- Example
Formal syntax
<counter-style> | <string> | nonewhere
<counter-style> = <counter-style-name> | symbols()
where
<counter-style-name> = <custom-ident>
Examples
CSS
ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }
HTML
<ol class="normal">List 1 <li>Hello</li> <li>World</li> <li>What's up?</li> </ol> <ol class="shortcut">List 2 <li>Looks</li> <li>Like</li> <li>The</li> <li>Same</li> </ol>
Result
Notes
- Some types require a suitable font installed to display as expected.
- The
cjk-ideographic
is identical totrad-chinese-informal
; it exists for legacy reasons.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'list-style-type' in that specification. |
Candidate Recommendation | Redefines CSS2.1 counters. Extends the syntax to support @counter-style rules.Defines using @counter-style the usual style types: hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha , japanese-formal , japanese-informal , simp-chinese-formal , trad-chinese-formal , simp-chinese-formal , trad-chinese-formal ,korean-hangul-formal , korean-hanja-informal , korean-hanja-formal , cjk-decimal , ethiopic-numeric , disclosure-open and disclosure-closed .Extends <counter-style> with the symbols() functional notation. |
CSS Lists and Counters Module Level 3 The definition of 'list-style-type' in that specification. |
Working Draft | Modify syntax to support for identifiers used in @counter-style rules to keywords.Support for a simple <string> . |
CSS Level 2 (Revision 1) The definition of 'list-style-type' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support including :none , disc , circle , square , decimal , lower-alpha , upper-alpha , lower-roman , upper-roman |
1.0 | (Yes) | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
lower-latin , upper-latin , lower-greek , armenian , georgian |
1.0 | (Yes) | 1.0 (1.0) | 8.0 | 6.0 | 1.0 (85) |
decimal-leading-zero |
1.0 | (Yes) | 1.0 (1.0) | 8.0 | 8.0 | 1.0 (85) |
hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha |
1.0 | No support | 1.0 (1.0) | No support | 7.0 (but displays decimal numbers only) 15.0 |
1.0-1.2 (85-125) |
japanese-formal , japanese-informal , simp-chinese-formal , trad-chinese-formal , simp-chinese-informal , trad-chinese-informal |
No support | No support | 1.0 (1.7 or earlier) -moz 28.0 (28.0) |
No support | No support | No support |
korean-hangul-formal , korean-hanja-informal , korean-hanja-formal , cjk-decimal |
No support | No support | 28.0 (28.0) | No support | No support |
No support
|
ethiopic-numeric , persian , arabic-indic , devanagari , bengali , gurmukhi , gujarati , oriya , tamil , telugu , kannada , malayalam , thai , lao , myanmar , khmer , cjk-heavenly-stem , cjk-earthly-branch |
No support | No support | 1.0 (1.7 or earlier) -moz 33.0 (33.0) [1] |
No support | No support |
No support |
disclosure-open , disclosure-closed , mongolian |
No support | No support | 33.0 (33.0) | No support | No support | No support |
<string> |
No support | No support | 39.0 (39.0) | No support | No support | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
[1] Before Firefox 38, Gecko added a dot as suffix of the number for ethiopic-numeric
(፫. instead of ፫). The later spec defined the absence of a suffix and Gecko was then adapted.