list-style-type

The list-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.

Syntax

/* 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: trad-chinese-informal;
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:

Note that:

  • Some types require a suitable font installed to display as expected.
  • The cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.

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 This is an experimental API that should not be used in production code.
  • 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
  • E.g. ١, ٢, ٣, ٤, ٥, ٦
armenian
  • Traditional Armenian numbering
  • (ayb/ayp, ben/pen, gim/keem…
bengali
-moz-bengali
  • Example
cambodian This is an experimental API that should not be used in production code. *
  • Example
  • Is a synonym for khmer
cjk-earthly-branch
-moz-cjk-earthly-branch
  • Example
cjk-heavenly-stem
-moz-cjk-heavenly-stem
  • Example
cjk-ideographic This is an experimental API that should not be used in production code.
  • Identical to trad-chinese-informal
  • E.g. 一萬一千一百一十一
devanagari
-moz-devanagari
  • Example
ethiopic-numeric This is an experimental API that should not be used in production code.
  • Example
georgian
  • Traditional Georgian numbering
  • E.g. an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
  • Example
gurmukhi
-moz-gurmukhi
  • Example
hebrew This is an experimental API that should not be used in production code.
  • Traditional Hebrew numbering
hiragana This is an experimental API that should not be used in production code.
  • E.g. あ, い, う, え, お, か, き…
  • (Japanese)
hiragana-iroha This is an experimental API that should not be used in production code.
  • E.g. い, ろ, は, に, ほ, へ, と…
  • Iroha is the old japanese ordering of syllabs.
japanese-formal This is an experimental API that should not be used in production code.
  • 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 This is an experimental API that should not be used in production code.
  • Japanese informal numbering
kannada
-moz-kannada
  • Example
katakana This is an experimental API that should not be used in production code.
  • E.g. ア, イ, ウ, エ, オ, カ, キ…
  • (Japanese)
katakana-iroha This is an experimental API that should not be used in production code.
  • E.g. イ, ロ, ハ, ニ, ホ, ヘ, ト…
  • Iroha is the old japanese ordering of syllabs.
khmer
-moz-khmer
  • Example
korean-hangul-formal This is an experimental API that should not be used in production code.
  • Korean hangul numbering.
  • E.g., 일만 일천일백일십일
korean-hanja-formal This is an experimental API that should not be used in production code.
  • Formal Korean Han numbering.
  • E.g. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal This is an experimental API that should not be used in production code.
  • Korean hanja numbering.
  • E.g., 萬 一千百十一
lao
-moz-lao
  • Example
lower-armenian This is an experimental API that should not be used in production code. *
  • Example
malayalam
-moz-malayalam
  • Example
mongolian This is an experimental API that should not be used in production code.
  • Example
myanmar
-moz-myanmar
  • Example
oriya
-moz-oriya
  • Example
persian This is an experimental API that should not be used in production code.
-moz-persian
  • E.g. ۱, ۲, ۳, ۴, ۵, ۶
simp-chinese-formal This is an experimental API that should not be used in production code.
  • Simplified Chinese formal numbering.
  • E.g. 壹万壹仟壹佰壹拾壹
simp-chinese-informal This is an experimental API that should not be used in production code.
  • Simplified Chinese informal numbering.
  • E.g. 一万一千一百一十一
tamil This is an experimental API that should not be used in production code.
-moz-tamil
  • Example
telugu
-moz-telugu
  • Example
thai
-moz-thai
  • Example
tibetan This is an experimental API that should not be used in production code. *
  • Example
trad-chinese-formal This is an experimental API that should not be used in production code.
  • Traditional Chinese formal numbering.
  • E.g. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal This is an experimental API that should not be used in production code.
  • Traditional Chinese informal numbering.
  • E.g. 一萬一千一百一十一
upper-armenian This is an experimental API that should not be used in production code. *
  • Example
disclosure-open This is an experimental API that should not be used in production code.
  • Symbol indicating that a disclosure widget such as <details> is opened.
disclosure-closed This is an experimental API that should not be used in production code.
  • Symbol indicating that a disclosure widget, like <details> is closed.

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

Accessibility concerns

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";
}

Formal definition

Initial valuedisc
Applies tolist items
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

<counter-style> | <string> | none

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

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

Examples

Setting list item markers

HTML

List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>

CSS

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

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

Result

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 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

BCD tables only load in the browser

See also