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
.
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.
/* 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;
<url>
none
list-style-type
will be used instead.<url> | none
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); }
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | 12 | 4 | 6 | 1 | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image