list-style-image

Description

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

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.

Syntax and Property Values


list-style-image: url(url of image) | none 

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

Example


<!DOCTYPE HTML>
<html>
<head>
  <style>
  body { <!--  ww w  . j  av  a 2 s. 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

The code above generates the following result.

list-style-image




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference