The list-style-image
CSS property specifies an image to be used as the list item marker. It is often more convenient to use the shorthand list-style
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note: This property is applied to list items, i.e. elements with
by default this includes display
: list-item;<li>
elements. Because this property is inherited, it can be set on the parent element (normally <ol>
or <ul>
) to let it apply to all list items.
Syntax
/* Keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* Global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset;
Values
<url>
- Location of image to use as the marker.
none
- Specifies that no image is used as the marker. If this value is set, the marker defined in
list-style-type
will be used instead.
Formal syntax
<url> | none
Example
HTML
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
CSS
ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists Module Level 3 The definition of 'list-style-image' in that specification. |
Working Draft | Extends support to any <image> data type. |
CSS Level 2 (Revision 1) The definition of 'list-style-image' in that specification. |
Recommendation | Initial definition |
Initial value | none |
---|---|
Applies to | list items |
Inherited | yes |
Media | visual |
Computed value | none or the image with its URI made absolute |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | 1 | Yes | 12 | 4 | 6 | 1 | Yes |