list-style-type

The list-style-type property specifies the appearance of a list item element.

/* 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;

/* A <string> */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

<div class="grid">
  <div class="row">
    <div class="cell">
      <ul>
        <li>Banana</li>
        <li>Apple</li>
        <li>Peach</li>
        <li>Platypus</li>
        <li>Orange</li>
      </ul>
    </div>
    <div class="note">
      <p>
        list-style-type:
        <select>
          <option>none</option>
          <option>inherit</option>
          <optgroup label="Custom types">
            <option>"Fruit or… "</option>
            <option>symbols(symbolic '○' '●')</option>
            <option>custom-emoji</option>
          </optgroup>
          <optgroup label="Symbolic types">
            <option>disc</option>
            <option>circle</option>
            <option>square</option>
            <option>disclosure-open</option>
            <option>disclosure-closed</option>
          </optgroup>
          <optgroup label="Alphabetic types">
            <option>lower-alpha</option>
            <option>lower-latin</option>
            <option>upper-alpha</option>
            <option>upper-latin</option>
            <option>cjk-earthly-branch</option>
            <option>cjk-heavenly-stem</option>
            <option>lower-greek</option>
            <option>hiragana</option>
            <option>hiragana-iroha</option>
            <option>katakana</option>
            <option>katakana-iroha</option>
          </optgroup>
          <optgroup label="Numeric types">
            <option>decimal</option>
            <option>decimal-leading-zero</option>
            <option>arabic-indic</option>
            <option>armenian</option>
            <option>upper-armenian</option>
            <option>lower-armenian</option>
            <option>bengali</option>
            <option>cambodian</option>
            <option>khmer</option>
            <option>cjk-decimal</option>
            <option>devanagari</option>
            <option>georgian</option>
            <option>gujarati</option>
            <option>gurmukhi</option>
            <option>hebrew</option>
            <option>kannada</option>
            <option>lao</option>
            <option>malayalam</option>
            <option>mongolian</option>
            <option>myanmar</option>
            <option>oriya</option>
            <option>persian</option>
            <option>lower-roman</option>
            <option>upper-roman</option>
            <option>tamil</option>
            <option>telugu</option>
            <option>thai</option>
            <option>tibetan</option>
          </optgroup>
        </select>
      </p>
      "custom-emoji" Assume the following rule:
      <pre>@counter-style custom-emoji {
  system: cyclic;
  symbols: &#x1F600; &#x1F60D; &#x1F61D; &#x1F631;
  suffix: " ";
}</pre>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1;
  min-width: 150px;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: left;
  flex: 1;
  white-space: nowrap;
}

.note p { margin-top: 0; }
.note pre { margin-bottom: 0; }

@counter-style custom-emoji {
  system: cyclic;
  symbols: "\1F600" "\1F60D" "\1F61D" "\1F631";
  suffix: " ";
}

ul {
  display: inline-block;
  text-align: left;
  font-family: sans-serif;
  line-height: 1.5;
}

function updateList () {
  var UL  = document.querySelector('ul');
  var val = document.querySelector('select').value;

  console.log(UL)
  console.log(val)

  UL.style.listStyleType = val;
}

window.addEventListener('load', function () {
  var select = document.querySelector('select');
  var n = select.options.length
  select.selectedIndex = Math.floor(Math.random() * n);

  updateList()
})

window.addEventListener('input', updateList)

Because the <li> element is the only property that defaults to display:list-item, this property is usually applied to an <li> element, but it may be applied to  any element whose display value is list-item.

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

Syntax

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

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

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

[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

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