Thelist-style-type
CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
The color of the marker will be the same as the computed color of the element it applies to.
Only a few elements (<li>
and <summary>
) have a default value of display: list-item
. However, the list-style-type
property may be applied to any element whose display
value is set to list-item
. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol>
or <ul>
) to make it apply to all list items.
/* 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; /* <string> value */ list-style-type: '-'; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset;
The list-style-type property may be defined as any one of:
<custom-ident>
valuesymbols()
value<string>
valuenone
.<custom-ident>
@counter-style
or one of the predefined styles:symbols()
<string>
none
disc
circle
square
decimal
cjk-decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
lower-latin
is unsupported in IE7 and earlierupper-alpha
upper-latin
upper-latin
is unsupported in IE7 and earlierarabic-indic
-moz-arabic-indic
armenian
bengali
-moz-bengali
cambodian
*khmer
cjk-earthly-branch
-moz-cjk-earthly-branch
cjk-heavenly-stem
-moz-cjk-heavenly-stem
cjk-ideographic
trad-chinese-informal
devanagari
-moz-devanagari
ethiopic-numeric
georgian
gujarati
-moz-gujarati
gurmukhi
-moz-gurmukhi
hebrew
hiragana
hiragana-iroha
japanese-formal
japanese-informal
kannada
-moz-kannada
katakana
katakana-iroha
khmer
-moz-khmer
korean-hangul-formal
korean-hanja-formal
korean-hanja-informal
lao
-moz-lao
lower-armenian
*malayalam
-moz-malayalam
mongolian
myanmar
-moz-myanmar
oriya
-moz-oriya
persian
-moz-persian
simp-chinese-formal
simp-chinese-informal
tamil
-moz-tamil
telugu
-moz-telugu
thai
-moz-thai
tibetan
*trad-chinese-formal
trad-chinese-informal
upper-armenian
*disclosure-open
<details>
is opened.disclosure-closed
<details>
is closed.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
-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
<counter-style> | <string> | nonewhere
<counter-style> = <counter-style-name> | symbols()where
<counter-style-name> = <custom-ident>
ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }
<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>
The VoiceOver screen reader has an issue where unordered lists with a list-style-type
value of none
applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.
ul { list-style: none; } ul li::before { content: "\200B"; }
cjk-ideographic
is identical to trad-chinese-informal
; it exists for legacy reasons.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 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 |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
arabic-indic
|
No | No | ? | No | No | No |
armenian |
1 | 12 | 1 | 8 | 6 | 1 |
bengali
|
No | No | ? | No | No | No |
cjk-decimal
|
No | No | 28 | No | No | No |
cjk-earthly-branch
|
No | No | ? | No | No | No |
cjk-heavenly-stem
|
No | No | ? | No | No | No |
cjk-ideographic
|
1 | No | 1 | No | 15
|
? |
decimal-leading-zero |
1 | 12 | 1 | 8 | 8 | 1 |
devanagari
|
No | No | ? | No | No | No |
disclosure-closed
|
No | No | 33 | No | No | No |
disclosure-open
|
No | No | 33 | No | No | No |
ethiopic-numeric
|
No | No | ? | No | No | No |
georgian |
1 | 12 | 1 | 8 | 6 | 1 |
gujarati
|
No | No | ? | No | No | No |
gurmukhi
|
No | No | ? | No | No | No |
hebrew
|
1 | No | 1 | No | 15
|
? |
hiragana
|
1 | No | 1 | No | 15
|
? |
hiragana-iroha
|
1 | No | 1 | No | 15
|
? |
japanese-formal
|
No | No | 28
|
No | No | No |
japanese-informal
|
No | No | 28
|
No | No | No |
kannada
|
No | No | ? | No | No | No |
katakana
|
1 | No | 1 | No | 15
|
? |
katakana-iroha
|
1 | No | 1 | No | 15
|
? |
khmer
|
No | No | ? | No | No | No |
korean-hangul-formal
|
No | No | 28 | No | No | No |
korean-hanja-formal
|
No | No | 28 | No | No | No |
korean-hanja-informal
|
No | No | 28 | No | No | No |
lao
|
No | No | ? | No | No | No |
lower-greek |
1 | 12 | 1 | 8 | 6 | 1 |
lower-latin |
1 | 12 | 1 | 8 | 6 | 1 |
malayalam
|
No | No | ? | No | No | No |
mongolian
|
No | No | 33 | No | No | No |
myanmar
|
No | No | ? | No | No | No |
oriya
|
No | No | ? | No | No | No |
persian
|
No | No | ? | No | No | No |
simp-chinese-formal
|
No | No | 28
|
No | No | No |
simp-chinese-informal
|
No | No | 28
|
No | No | No |
tamil
|
No | No | ? | No | No | No |
telugu
|
No | No | ? | No | No | No |
thai
|
No | No | ? | No | No | No |
trad-chinese-formal
|
No | No | 28
|
No | No | No |
trad-chinese-informal
|
No | No | 28
|
No | No | No |
upper-latin |
1 | 12 | 1 | 8 | 6 | 1 |
<string>
|
No | No | 39 | No | No | No |
symbols
|
No | ? | 35 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | 12 | 4 | Yes | Yes | Yes |
arabic-indic
|
? | ? | ? | 33
|
? | ? | No |
armenian |
? | Yes | Yes | 4 | Yes | Yes | Yes |
bengali
|
? | ? | ? | 33
|
? | ? | No |
cjk-decimal
|
? | ? | ? | ? | ? | ? | No |
cjk-earthly-branch
|
? | ? | ? | 33
|
? | ? | No |
cjk-heavenly-stem
|
? | ? | ? | 33
|
? | ? | No |
cjk-ideographic
|
? | ? | ? | ? | ? | ? | ? |
decimal-leading-zero |
? | ? | ? | ? | ? | ? | ? |
devanagari
|
? | ? | ? | 33
|
? | ? | No |
disclosure-closed
|
? | ? | ? | ? | ? | ? | No |
disclosure-open
|
? | ? | ? | ? | ? | ? | No |
ethiopic-numeric
|
? | ? | ? | 33
|
? | ? | No |
georgian |
? | Yes | Yes | 4 | Yes | Yes | Yes |
gujarati
|
? | ? | ? | 33
|
? | ? | No |
gurmukhi
|
? | ? | ? | 33
|
? | ? | No |
hebrew
|
? | ? | ? | ? | ? | ? | ? |
hiragana
|
? | ? | ? | ? | ? | ? | ? |
hiragana-iroha
|
? | ? | ? | ? | ? | ? | ? |
japanese-formal
|
? | ? | ? | ? | ? | ? | No |
japanese-informal
|
? | ? | ? | ? | ? | ? | No |
kannada
|
? | ? | ? | 33
|
? | ? | No |
katakana
|
? | ? | ? | ? | ? | ? | ? |
katakana-iroha
|
? | ? | ? | ? | ? | ? | ? |
khmer
|
? | ? | ? | 33
|
? | ? | No |
korean-hangul-formal
|
? | ? | ? | ? | ? | ? | No |
korean-hanja-formal
|
? | ? | ? | ? | ? | ? | No |
korean-hanja-informal
|
? | ? | ? | ? | ? | ? | No |
lao
|
? | ? | ? | 33
|
? | ? | No |
lower-greek |
? | Yes | Yes | 4 | Yes | Yes | Yes |
lower-latin |
? | Yes | Yes | 4 | Yes | Yes | Yes |
malayalam
|
? | ? | ? | 33
|
? | ? | No |
mongolian
|
? | ? | ? | ? | ? | ? | No |
myanmar
|
? | ? | ? | 33
|
? | ? | No |
oriya
|
? | ? | ? | 33
|
? | ? | No |
persian
|
? | ? | ? | 33
|
? | ? | No |
simp-chinese-formal
|
? | ? | ? | ? | ? | ? | No |
simp-chinese-informal
|
? | ? | ? | ? | ? | ? | No |
tamil
|
? | ? | ? | 33
|
? | ? | No |
telugu
|
? | ? | ? | 33
|
? | ? | No |
thai
|
? | ? | ? | 33
|
? | ? | No |
trad-chinese-formal
|
? | ? | ? | ? | ? | ? | No |
trad-chinese-informal
|
? | ? | ? | ? | ? | ? | No |
upper-latin |
? | Yes | Yes | 4 | Yes | Yes | Yes |
<string>
|
? | ? | ? | ? | ? | ? | No |
symbols
|
No | No | ? | 35 | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type