rick@tillitsdone.com

+66824564755

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.

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>

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-border-right-width.png

CSS Border-Right-Width Control Right Border Width Learn how to use the CSS border-right-width property to control the thickness of the right border of an element. Options include predefined keywords like thin, medium, thick, and specific length values.

css_property_cover/css-property-font-variant-position.png

CSS Font-Variant-Position Enhance Typography with Superscript and Subscript Discover the CSS font-variant-position property for controlling superscript and subscript glyphs. Learn about its use cases, available options like 'normal', 'sub', and 'super', and how to incorporate it into your web design projects for improved typography.

css_property_cover/css-property-text-overflow.png

CSS Text-Overflow Guide & Examples Learn how to use CSS text-overflow to manage overflow text. Options include clip, ellipsis, and custom strings for a clean, user-friendly layout.

css_property_cover/css-property-outline-color.png

CSS outline-color Enhancing Element Visibility Learn about the CSS outline-color property, which enhances element visibility by setting the outline color. Discover available options like color names, hex, RGB, and more.

css_property_cover/css-property-letter-spacing.png

Understanding CSS Letter-Spacing for Better Typography Learn how to use CSS letter-spacing to control the horizontal spacing between text characters. Enhance text readability and visual appeal with options like normal, length values, inherit, initial, revert, revert-layer, and unset.

css_property_cover/css-property-outline-width.png

Understanding CSS outline-width for Better Web Designs Learn how to use the CSS outline-width property to highlight elements. Discover available options like thin, medium, thick, and length values.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms

Mastering CSS list-style-type for Enhanced Web Design

Introduction

Description

Syntax

Values

Predefined Styles

Custom Identifiers

Strings

Keyword none

Global Values

Non-standard Extensions

Examples of Non-standard Extensions

Usage in CSS

Accessibility

Screen Readers and List Recognition

Workarounds for Enhanced Accessibility

Examples

Predefined Styles

Custom Identifiers

Strings

Keyword none

Global Values

Formal Syntax

Explanation

Example

Summary

Examples

Setting List Item Markers

Using Different List Style Types

HTML

Result

Custom List Style Types

HTML

Talk with CEO

Keyword `none`

Keyword `none`