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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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:

• 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. 一萬一千一百一十一

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

• E.g. あ, い, う, え, お, か, き…
• (Japanese)

hiragana-iroha

• E.g. い, ろ, は, に, ほ, へ, と…
• 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

• E.g. ア, イ, ウ, エ, オ, カ, キ…
• (Japanese)

katakana-iroha

• E.g. イ, ロ, ハ, ニ, ホ, ヘ, ト…
• 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.

disclosure-closed

• 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

Formal syntax

<counter-style> | <string> | none
where 
<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

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

• VoiceOver and list-style-type: none – Unfettered Thoughts
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

Notes

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

Specifications

Browser compatibility

See also

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