CSS list-style Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

This demo uses shorthand property 'list-style'.

Apple
Banana
Cherry

CSS list-style Property

CSS list-style property is a shorthand property of the following CSS properties

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> ul{ font-size: 18px; line-height: 1.8; list-style: square outside url("/add.svg"); } </style> </head> <body> <h1>CSS list-style Property</h1> <ul id="point"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> </body> </html>

Run

Syntax

Using CSS

element{ list-style: disc inside url("/volume.svg"); }

Using Javascript

object.style.listStyle="disc inside url("/volume.svg")";

Animatable

No, list-style property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS list-style property is disc outside none.

Property Value

The following table provides a list of values for CSS list-style property.

Value	Type	Explanation
list-style-type	Required	Specifies the type of list-item marker.
list-style-position	Required	Specifies where to place the list-item marker.
list-style-image	Required	Specifies the type of list-item marker.

Using JavaScript

In the following example, we will demonstrate how to change the CSS list-style property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> ul{ font-size: 18px; line-height: 1.8; } </style> </head> <body> <h1>CSS list-style Property</h1> <ul id="point"> <li>Apple - An apple is a sweet, edible fruit ...</li> <li>Banana - A banana is an edible fruit...</li> </ul> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("ul")[0]; function myFunction(){ x.style.listStyle = "disc inside url("/volume.svg")"; } </script> </body> </html>

Run