The list-style-image CSS property sets 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 display: list-item; by default this includes <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-typewill be used instead.
Formal definition
| Initial value | none
|
| Applies to | list items |
| Inherited | yes |
| Computed value | none or the image with its URI made absolute
|
| Animation type | discrete |
Formal syntax
<url> | none
Examples
Setting list item images
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 3The 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 |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style-image
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 4 |
Opera
Full support 7 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
list-style,list-style-type,list-style-positionurl()function
list-style-image by Mozilla Contributors is licensed under CC-BY-SA 2.5.