Summary
The list-style-image CSS property sets the image that will be used as the list item marker.
It is often more convenient to use the shorthand list-style.
- Initial value
none - Applies to list items
- Inherited yes
- Media
visual - Computed value none or the image with its URI made absolute
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <uri> | none
list-style-image: none
list-style-image: url('starsolid.gif')
list-style-image: inherit
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.
Examples
HTML Content
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS Content
ul { list-style-image: url("https://developer.mozilla.org/samples/cssref/list-style/starsolid.gif") }
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
Document Tags and Contributors
Tags:
Contributors to this page: Sheppy, Rappo, Jürgen Jeka, Nathymig, teoli, ethertank, BijuGC, Alex Lakatos, kscarfone, ronakkhunt, Sebastianz, Mgjbot, Ptak82, DBaron, grendel, McGurk
Last updated by:
ronakkhunt,