CSS Property list-style-image








list-style-image specifies an image as the marker on a list item.

Summary

ItemValue
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>

Click to view the demo