CSS list-style-image Property


Example

Specify an image as the list-item marker in a list:

ul {
  list-style-image: url('sqpurple.gif');
}
Try it Yourself »

Definition and Usage

The list-style-image property replaces the list-item marker with an image.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

Show demo ❯

Default value: none
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStyleImage="url('smiley.gif')" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
list-style-image 1.0 4.0 1.0 1.0 7.0


CSS Syntax

list-style-image: none|url|initial|inherit;

Property Values

Value Description Demo
none No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered. This is default Demo ❯
url The path to the image to be used as a list-item marker Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS List

CSS reference: list-style property

HTML DOM reference: listStyleImage property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.