Tillitsdone
down Scroll to discover
Mastering CSS list-style-type for Enhanced Web Design
Discover the power of CSS list-style-type for customizing list markers.

Explore predefined styles, custom identifiers, and more to enhance your web design.
thumbnail

Introduction

The list-style-type property in CSS is a handy tool for customizing the appearance of list item markers. Whether you’re using discs, characters, or custom counter styles, this property lets you tailor your lists to fit your web page’s design and functionality.

Description

The list-style-type property defines the type of marker that appears next to each item in a list. This property is essential for making lists more visually appealing and user-friendly. You can use it with ordered (<ol>) and unordered (<ul>) lists, applying various marker styles like discs, circles, squares, numbers, and more.

By default, list items (<li>) have a display type of list-item. The list-style-type property can be applied to any element with this display type. Additionally, because this property is inherited, setting it on a parent element like <ol> or <ul> will apply the specified marker style to all child list items.

Syntax

The syntax for the list-style-type property is straightforward:

list-style-type: value;

You can use predefined styles, custom identifiers, strings, and the keyword none. Here are some examples:

/* Predefined styles */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
/* Custom string */
list-style-type: "-";
/* Custom counter style */
@counter-style custom-counter {
system: cyclic;
symbols: "A" "B" "C";
}
list-style-type: custom-counter;
/* Keyword value */
list-style-type: none;
/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

Values

The list-style-type property can take various values, including predefined styles, custom identifiers, strings, and the keyword none.

Predefined Styles

Predefined styles are the most commonly used values. Here are some examples:

  • 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.
  • lower-roman: Lowercase Roman numerals.
  • upper-roman: Uppercase Roman numerals.
  • lower-greek: Lowercase classical Greek.
  • lower-alpha: Lowercase ASCII letters.
  • upper-alpha: Uppercase ASCII letters.
  • arabic-indic: Arabic-Indic numbers.
  • trad-chinese-informal: Traditional Chinese informal numbering.

Custom Identifiers

You can define your own counter styles using the @counter-style rule:

@counter-style custom-counter {
system: cyclic;
symbols: "A" "B" "C";
}
list-style-type: custom-counter;

Strings

You can use a custom string as a marker:

list-style-type: "-";

Keyword none

The none value removes the marker:

list-style-type: none;

Global Values

Global values like inherit, initial, revert, revert-layer, and unset are used to handle inheritance and default settings:

list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

Non-standard Extensions

Some browsers support non-standard extensions for the list-style-type property, prefixed with -moz- and primarily used in Mozilla Firefox. These extensions are not part of the official CSS standard but can be useful for achieving specific styles in Firefox.

Examples of Non-standard Extensions

  • ethiopic-halehame: -moz-ethiopic-halehame
  • hangul: -moz-hangul

Usage in CSS

/* Using non-standard extension for Ethiopic Halehame */
list-style-type: -moz-ethiopic-halehame;
/* Using non-standard extension for Hangul */
list-style-type: -moz-hangul;

Accessibility

Ensuring that your lists are accessible to all users is crucial. Here are some considerations:

Screen Readers and List Recognition

Safari and some other browsers may not recognize an ordered or unordered list as a list in the accessibility tree if the list-style-type property is set to none. This can make it difficult for screen readers to interpret the list correctly.

Workarounds for Enhanced Accessibility

To ensure accessibility, consider the following:

  • Use ARIA Roles: Add ARIA roles to your lists to help screen readers recognize them.
  • Provide Alternative Text: Include alternative text or descriptions for custom markers to ensure they are understood by screen readers.

Examples

Predefined Styles

ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}

Custom Identifiers

@counter-style custom-counter {
system: cyclic;
symbols: "A" "B" "C";
}
ul {
list-style-type: custom-counter;
}

Strings

ul {
list-style-type: "-";
}

Keyword none

ul {
list-style-type: none;
}

Global Values

ul {
list-style-type: inherit;
}

By understanding and using the list-style-type property effectively, you can create visually appealing and functional lists that enhance the user experience on your website.

Formal Syntax

The list-style-type property in CSS has a specific syntax. Here’s how you can use it:

list-style-type =
<counter-style> |
<string> |
none;
<counter-style> =
<counter-style-name> |
<symbols()>;
<symbols()> =
symbols( <symbols-type> [ <string> | <image> ]+ );
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed;
<image> =
<url> |
<gradient>;
<url> =
url( <string> );

Explanation

  • <counter-style>: Can be a predefined counter style name or custom style.
    • <counter-style-name>: Predefined names like decimal, lower-alpha, upper-roman.
    • <symbols()>: Defines custom symbols using the symbols() function.
  • <string>: A custom string used as the marker, like list-style-type: "-";.
  • none: No marker is shown.
  • <symbols-type>: Specifies the type of symbols.
    • cyclic: Repeating cycle.
    • numeric: Numeric sequence.
    • alphabetic: Alphabetic sequence.
    • symbolic: Symbolic sequence.
    • fixed: Fixed set of symbols.
  • <image>: An image used as the marker.
    • <url>: The URL of the image.
    • <gradient>: A gradient image.
  • <url>: The URL of the image or gradient.

Example

Here’s how to use the list-style-type property with different values:

/* Predefined 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;
/* Custom string */
list-style-type: "-";
/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;
/* No marker */
list-style-type: none;
/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

Summary

The list-style-type property lets you control the appearance of list item markers. Understanding its syntax helps you use predefined styles, custom strings, and images effectively.

Examples

Let’s explore some practical examples to see how the list-style-type property works.

Setting List Item Markers

Here, we’ll create two lists: one with a default marker style and another with a custom marker style.

Using Different List Style Types

We’ll create an ordered list and allow users to change the marker style using radio buttons.

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Examples</title>
<style>
ol {
font-size: 1.2rem;
}
.container {
column-count: 3;
}
label {
display: block;
}
input {
margin: 0.4rem;
}
</style>
</head>
<body>
<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="telugu">
<input type="radio" id="telugu" name="type" value="telugu" />telugu
</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>
</div>
<script>
const container = document.querySelector(".container");
container.addEventListener("change", (event) => {
const list = document.querySelector("ol");
list.setAttribute("style", `list-style-type: ${event.target.value}`);
});
</script>
</body>
</html>

Result

The ordered list will change its marker style based on the selected radio button.

Custom List Style Types

Let’s define a custom counter style using the @counter-style rule and apply it to a list.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Custom List Style Types</title>
<style>
Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.