CSS list-style-image attribute

Definition and Usage

The listStyleImage property uses an image to replace the marker of the list item.

Description

This property specifies an image that is used as a marker for an ordered or unordered list item. The position of the image relative to the content of the list item is usually controlled by the list-style-position property.

Note:Always specify a "list-style-type" property in case the image is not available.

See also:

CSS Tutorial:CSS Lists

CSS Reference Manual:CSS list-style attribute

HTML DOM Reference Manual:listStyleImage Property

Example

Set the image as the marker for the list item:

ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

Try it yourself

CSS Syntax

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

Property Value

Value Description
URL The path of the image.
none Default. No graphics are displayed.
inherit Specifies that the value of the list-style-image property should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.listStyleImage="url('/images/blueball.gif')"

More examples

Using an image as a list item marker
This example demonstrates how to use an image as a list item marker.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0