CSS - list-style-image
The list-style-image
property specifies an image to be used as the list item marker.
Examples
HTML
HTML
Copy Code
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
CSS
CSS
Copy Code
ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") }
Result
Syntax
CSS
Copy Code
/* 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
<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-type
will be used instead.
Formal syntax
CSS
Copy Code
<a href="css/url" title=""><uri></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none
Description
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
.
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 | 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
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 |
License
© 2016 Mozilla 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