Top List List

List style css arrow

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 [

and ] 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

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; /* 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 value
a symbols[] value
a 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

A identifier matching the value of a @counter-style or one of the predefined styles:

symbols[]

Defines an anonymous style of the list.

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 is opened.

disclosure-closed

Symbol indicating that a disclosure widget, like 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 valueApplies toInheritedComputed valueAnimation type

disc

list items

yes

as specified

discrete

Formal syntax

| | none

where
= | symbols[]

where
=

Examples

Setting list item markers

HTML

List 1 Hello World What's up? List 2 Looks Like The Same

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

Apollo Hubble Chandra Cassini-Huygens Spitzer Choose a list style type: disc circle square decimal cjk-decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha, lower-latin upper-alpha, upper-latin arabic-indic armenian bengali cambodian cjk-earthly-branch cjk-heavenly-stem cjk-ideographic devanagari ethiopic-numeric georgian gujarati gurmukhi hebrew hiragana hiragana-iroha japanese-formal japanese-informal kannada katakana katakana-iroha khmer korean-hangul-formal korean-hanja-formal korean-hanja-informal lao lower-armenian malayalam mongolian myanmar oriya persian simp-chinese-formal simp-chinese-informal tamil telegu thai tibetan trad-chinese-formal trad-chinese-informal upper-armenian disclosure-open disclosure-closed -moz-ethiopic-halehame -moz-ethiopic-halehame-am ethiopic-halehame-ti-er ethiopic-halehame-ti-et hangul hangul-consonant urdu -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-hangul -moz-hangul-consonant -moz-urdu

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 Module Level 3 [CSS Lists 3]
# text-markers

CSS Counter Styles Level 3 [CSS Counter Styles 3]
# extending-css2

Browser compatibility

BCD tables only load in the browser

list-style-type

Syntax

Values

Non-standard extensions

Accessibility concerns

Formal definition

Formal syntax

Examples

Setting list item markers

HTML

CSS

Result

All list style types

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

See also

Video liên quan

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề