The list-style-image property specifies an image to be used as the list item marker. It is often more convenient to use the shorthand list-style.
/* 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;
| 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 |
Note: This property is applied to list items, i.e. elements with 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
Values
<uri>- 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 syntax
<url> | none
Examples
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 and Counters 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 |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
Arty-chan,
Sebastianz,
erikadoyle,
vanjacosic,
wizAmit,
SphinxKnight,
fscholz,
wbamberg,
ronakkhunt,
kscarfone,
teoli,
Sheppy,
ethertank,
McGurk,
grendel,
Alex Lakatos,
Jürgen Jeka,
Nathymig,
BijuGC,
DBaron,
Mgjbot,
Ptak82,
alecananian
Last updated by:
Arty-chan,