list-style-type
Quick Summary for 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.
Code Usage for list-style-type
/* 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: revert; list-style-type: unset; 
More Details for list-style-type

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: revert; 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.

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

Han decimal numbers.

decimal-leading-zero

Decimal numbers, padded by initial zeros.

lower-roman

Lowercase roman numerals.

upper-roman

Uppercase roman numerals.

lower-greek

Lowercase classical Greek.

lower-alpha, lower-latin

Lowercase ASCII letters.

upper-alpha, upper-latin

Uppercase ASCII letters.

arabic-indic, -moz-arabic-indic

Arabic-Indic numbers.

armenian

Traditional Armenian numbering.

bengali, -moz-bengali

Bengali numbering.

cambodian/khmer

Cambodian/Khmer numbering.

cjk-earthly-branch, -moz-cjk-earthly-branch

Han "Earthly Branch" ordinals.

cjk-heavenly-stem, -moz-cjk-heavenly-stem

Han "Heavenly Stem" ordinals.

cjk-ideographic

Identical to trad-chinese-informal.

devanagari, -moz-devanagari

Devanagari numbering.

ethiopic-numeric

Ethiopic numbering.

georgian

Traditional Georgian numbering.

gujarati, -moz-gujarati

Gujarati numbering.

gurmukhi, -moz-gurmukhi

Gurmukhi numbering.

hebrew

Traditional Hebrew numbering

hiragana

Dictionary-order hiragana lettering.

hiragana-iroha

Iroha-order hiragana lettering

japanese-formal

Japanese formal numbering to be used in legal or financial documents. 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

Kannada numbering.

katakana

Dictionary-order katakana lettering

katakana-iroha

Iroha-order katakana lettering

korean-hangul-formal

Korean hangul numbering.

korean-hanja-formal

Formal Korean Han numbering.

korean-hanja-informal

Korean hanja numbering.

lao, -moz-lao

Laotian numbering.

lower-armenian *

Lowercase Armenian numbering.

malayalam, -moz-malayalam

Malayalam numbering.

mongolian

Mongolian numbering.

myanmar, -moz-myanmar

Myanmar (Burmese) numbering.

oriya, -moz-oriya

Oriya numbering.

persian , -moz-persian

Persian numbering

simp-chinese-formal

Simplified Chinese formal numbering.

simp-chinese-informal

Simplified Chinese informal numbering.

tamil , -moz-tamil

Tamil numbering.

telugu, -moz-telugu

Telugu numbering.

thai, -moz-thai

Thai numbering.

tibetan *

Tibetan numbering.

trad-chinese-formal

Traditional Chinese formal numbering.

trad-chinese-informal

Traditional Chinese informal numbering.

upper-armenian *

Traditional uppercase Armenian numbering.

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 -moz-ethiopic-halehame-am ethiopic-halehame-ti-er, -moz-ethiopic-halehame-ti-er ethiopic-halehame-ti-et, -moz-ethiopic-halehame-ti-et hangul, -moz-hangul hangul-consonant, -moz-hangul-consonant urdu, -moz-urdu

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

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

All list style types

HTML
<ol>   <li>Apollo</li>   <li>Hubble</li>   <li>Chandra</li>   <li>Cassini-Huygens</li>   <li>Spitzer</li> </ol>  <h2>Choose a list style type:</h2>  <div class="container">    <label for="disc">     <input type="radio" id="disc" name="type" value="disc">disc   </label>    <label for="circle">     <input type="radio" id="circle" name="type" value="circle">circle   </label>    <label for="square">     <input type="radio" id="square" name="type" value="square">square   </label>    <label for="decimal">     <input type="radio" id="decimal" name="type" value="decimal">decimal   </label>    <label for="cjk-decimal">     <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal   </label>    <label for="decimal-leading-zero">     <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero   </label>    <label for="lower-roman">     <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman   </label>    <label for="upper-roman">     <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman   </label>    <label for="lower-greek">     <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek   </label>    <label for="lower-alpha">     <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin   </label>    <label for="upper-alpha">     <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin   </label>    <label for="arabic-indic">     <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic   </label>    <label for="armenian">     <input type="radio" id="armenian" name="type" value="armenian">armenian   </label>    <label for="bengali">     <input type="radio" id="bengali" name="type" value="bengali">bengali   </label>    <label for="cambodian">     <input type="radio" id="cambodian" name="type" value="cambodian">cambodian   </label>    <label for="cjk-earthly-branch">     <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch   </label>    <label for="cjk-heavenly-stem">     <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem   </label>    <label for="cjk-ideographic">     <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic   </label>    <label for="devanagari">     <input type="radio" id="devanagari" name="type" value="devanagari">devanagari   </label>    <label for="ethiopic-numeric">     <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric   </label>    <label for="georgian">     <input type="radio" id="georgian" name="type" value="georgian">georgian   </label>    <label for="gujarati">     <input type="radio" id="gujarati" name="type" value="gujarati">gujarati   </label>    <label for="gurmukhi">     <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi   </label>    <label for="hebrew">     <input type="radio" id="hebrew" name="type" value="hebrew">hebrew   </label>    <label for="hiragana">     <input type="radio" id="hiragana" name="type" value="hiragana">hiragana   </label>    <label for="hiragana-iroha">     <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha   </label>    <label for="japanese-formal">     <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal   </label>    <label for="japanese-informal">     <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal   </label>    <label for="kannada">     <input type="radio" id="kannada" name="type" value="kannada">kannada   </label>    <label for="katakana">     <input type="radio" id="katakana" name="type" value="katakana">katakana   </label>    <label for="katakana-iroha">     <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha   </label>    <label for="khmer">     <input type="radio" id="khmer" name="type" value="khmer">khmer   </label>    <label for="korean-hangul-formal">     <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal   </label>    <label for="korean-hanja-formal">     <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal   </label>    <label for="korean-hanja-informal">     <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal   </label>    <label for="lao">     <input type="radio" id="lao" name="type" value="lao">lao   </label>    <label for="lower-armenian">     <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian   </label>    <label for="malayalam">     <input type="radio" id="malayalam" name="type" value="malayalam">malayalam   </label>    <label for="mongolian">     <input type="radio" id="mongolian" name="type" value="mongolian">mongolian   </label>    <label for="myanmar">     <input type="radio" id="myanmar" name="type" value="myanmar">myanmar   </label>    <label for="oriya">     <input type="radio" id="oriya" name="type" value="oriya">oriya   </label>    <label for="persian">     <input type="radio" id="persian" name="type" value="persian">persian   </label>    <label for="simp-chinese-formal">     <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal   </label>    <label for="simp-chinese-informal">     <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal   </label>    <label for="tamil">     <input type="radio" id="tamil" name="type" value="tamil">tamil   </label>    <label for="telegu">     <input type="radio" id="telegu" name="type" value="telegu">telegu   </label>    <label for="thai">     <input type="radio" id="thai" name="type" value="thai">thai   </label>    <label for="tibetan">     <input type="radio" id="tibetan" name="type" value="tibetan">tibetan   </label>    <label for="trad-chinese-formal">     <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal   </label>    <label for="trad-chinese-informal">     <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal   </label>    <label for="upper-armenian">     <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian   </label>    <label for="disclosure-open">     <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open   </label>    <label for="disclosure-closed">     <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed   </label>    <label for="-moz-ethiopic-halehame">     <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame   </label>    <label for="-moz-ethiopic-halehame-am">     <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am   </label>    <label for="ethiopic-halehame-ti-er">     <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er   </label>    <label for="ethiopic-halehame-ti-et">     <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et   </label>    <label for="hangul">     <input type="radio" id="hangul" name="type" value="hangul">hangul   </label>    <label for="hangul-consonant">     <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant   </label>    <label for="urdu">     <input type="radio" id="urdu" name="type" value="urdu">urdu   </label>    <label for="-moz-ethiopic-halehame-ti-er">     <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er   </label>    <label for="-moz-ethiopic-halehame-ti-et">     <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et   </label>    <label for="-moz-hangul">     <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul   </label>    <label for="-moz-hangul-consonant">     <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant   </label>    <label for="-moz-urdu">     <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu   </label>  </div> 
CSS
ol {   font-size: 1.2rem; }  .container {   column-count: 3; }  label {   display: block; }  input {   margin: .4rem; } 
JavaScript
const container = document.querySelector(".container"); container.addEventListener("change", event => {   const list = document.querySelector("ol");   list.setAttribute("style", `list-style-type: ${event.target.value}`); }); 
Result

Specifications

Specification
CSS Lists and Counters Module Level 3 # text-markers
CSS Counter Styles Level 3 # extending-css2

See also

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

Last modified: Aug 17, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Polski中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."

I just checked google books for BFG, and the dedication is there. 

https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1 


Roald Dahl, 1986
Random CSS Property

::before (:before)

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
::before (:before) css reference