mozilla
Your Search Results

    list-style-type

    This article is in need of an editorial review.

    Summary

    The list-style-type property specifies the 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.

    The color of the marker will be the same as the computed color of the element it applies to.

    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: cjk-ideographic;
    list-style-type: kannada;
    
    /* Identifier matching an @counter-style rule */
    list-style-type: custom-counter-style;
    
    list-style-type: none;
    

    Values

    symbols()
    Defines an anonymous style of the list.
    none
    No item marker is shown.
    <string>
    The specified string will be used as the item's marker's default contents.
    <custom-ident>
    A identifier matching the value of a @counter-style or one of the predefined styles:
    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 simp-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
    • 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, like <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

    <custom-ident> | <string> | symbols() | none
    

    Examples

    View the live example

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

    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

    Specification Status Comment
    CSS Counter Styles Level 3
    The definition of 'list-style-type' in that specification.
    Working Draft 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 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 1.0 (1.0) 4.0 3.5 1.0 (85)
    lower-latin, upper-latin, lower-greek, armenian, georgian 1.0 1.0 (1.0) 8.0 6.0 1.0 (85)
    decimal-leading-zero 1.0 1.0 (1.0) 8.0 8.0 1.0 (85)
    hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha 1.0 1.0 (1.0) Not supported 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 Not supported 1.0 (1.7 or earlier) -moz
    28.0 (28.0)
    Not supported Not supported Not supported
    korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal Not supported 28.0 (28.0) Not supported Not supported

    Not supported

     

    ethiopic-numeric, persian, arabic-indic, devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai, lao, myanmar, khmer, cjk-heavenly-stem, cjk-earthly-branch Not supported 1.0 (1.7 or earlier) -moz
    33.0 (33.0) [1]
    Not supported Not supported

    Not supported

    disclosure-open, disclosure-closed, mongolian Not supported 33.0 (33.0) Not supported Not supported Not supported
    <string> Not supported 39.0 (39.0) Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

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

    See also