list-style-type

Summary

The list-style-type CSS property specifies appearance of a list item element. As it is the only one which defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.

• Initial value disc
• Applies to list items
• Inherited yes
• Media visual
• Computed value as specified
• Animatable no
• 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.

Syntax

Formal syntax: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none

Values

none

No item marker is shown.

Keywords value is one of the following:

disc

• A filled circle (default value)

circle

• A hollow circle

square

• A filled square

decimal

• Han decimal numbers
• Beginning with 1.

cjk-decimal

• 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

armenian

• Traditional Armenian numbering
• (ayb/ayp, ben/pen, gim/keem…

georgian

• Traditional Georgian numbering
• E.g. an, ban, gan, … he, tan, in…

hebrew

• Traditional Hebrew numbering

ethiopic-numeric

• Example

hiragana

• a, i, u, e, o, ka, ki, …
• (Japanese)

katakana

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

katakana-iroha

• I, RO, HA, NI, HO, HE, TO, …
• Iroha is the old japanese ordering of syllabs.

japanese-informal

• Japanese informal numbering

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

korean-hangul-formal

• Korean hangul numbering.
• E.g., 일만 일천일백일십일

korean-hanja-informal

• Korean hanja numbering.
• E.g., 萬 一千百十一

korean-hanja-formal

• Formal Korean Han numbering.
• E.g. 壹萬 壹仟壹百壹拾壹

simp-chinese-informal

• Simplified Chinese informal numbering.
• E.g. 一万一千一百一十一

cjk-ideographic

• Identical to simp-chinese-informal
• E.g. 一万一千一百一十一

simp-chinese-formal

• Simplified Chinese formal numbering.
• E.g. 壹万壹仟壹佰壹拾壹

trad-chinese-informal

• Traditional Chinese informal numbering.
• E.g. 一萬一千一百一十一

trad-chinese-formal

• Traditional Chinese formal numbering.
• E.g. 壹萬壹仟壹佰壹拾壹

Non-standard extensions

Extended set of values 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.

arabic-indic

-moz-arabic-indic

• Example

bengali

-moz-bengali

• Example

cjk-earthly-branch

-moz-cjk-earthly-branch

• Example

cjk-heavenly-stem

-moz-cjk-heavenly-stem

• Example

devanagari

-moz-devanagari

• Example

-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

gujarati

-moz-gujarati

• Example

gurmukhi

-moz-gurmukhi

• Example

hangul

-moz-hangul

• Example
• Example
• Example

hangul-consonant

-moz-hangul-consonant

• Example
• Example
• Example

kannada

-moz-kannada

• Example

khmer

-moz-khmer

• Example

lao

-moz-lao

• Example

malayalam

-moz-malayalam

• Example

myanmar

-moz-myanmar

• Example

oriya

-moz-oriya

• Example

persian

-moz-persian

• Example

-moz-tamil

• Example

telugu

-moz-telugu

• Example

thai

-moz-thai

• Example

urdu

-moz-urdu

• Example

Examples

View the live example

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

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

Notes

• Some list-style-types require a suitable font installed to display as expected.
• The cjk-ideographic is identical to trad-chinese-informal. (It exists for legacy reasons.)
• The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, upper-alpha rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,... For long lists, it is recommended that authors specify true numbers.

Specifications

Browser compatibility

See also

• list-style, list-style-image, list-style-position