CSS Property list-style-image
list-style-image specifies an image as the marker on a list item.
Summary
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.listStyleImage="url('http://yourdomain/abc.gif')" |
| Applies to | Elements whose display value is list-item. |
CSS Syntax
list-style-image: url(url of image) | none
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| url | url for the image |
| none | No image is used. Use the list-style-type property. Default value. |
| inherit | Inherit the list-style-image property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
list-style-image |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use list-style-image CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
body { <!--from ww w . j ava2s .c o m-->
line-height: 1.5em;
}
ul {
list-style-image: url("http://java2s.com/style/download.png");
}
</style>
</head>
<body>
<ul>
<li>water</li>
<li>yeast</li>
<li>flour</li>
<li>oil</li>
<li>salt</li>
</ul>
</body>
</html>