CSS Lists - Changing the list-style-image (the Bullet) of HTML Lists

Description

    list-style-image: url(URL);    /* e.g. list-style-image: url(images/image1.gif); */
    list-style-image: none;
    list-style-image: inherit;
    

Examples for list-style-image

Example 1:

This example shows the use of an image instead of the standard bullets for an unordered list. The same technique works for ordered lists also.

• test
• test
• test
• test

    <style>
        #test {  list-style-image: url(images/bullet.gif); }
    </style>

    <ul id="test">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 2:

This example specifies no image to be displayed as the list item bullet. The default is then displayed.

• test
• test
• test
• test

    <style>
        #test2 {  list-style-image: none; }
    </style>

    <ul id="test2">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 3:

More interestingly this example shows that any element can be a list item by specifying a display value of list-item. This example shows a div, span and p tag as list items and as such the list-style-image property works with the span tag to show the image as the bullet. The bullet is shown to the left of the element which is why a left margin of 20px is specified.

item 3

The code:

    <style>
        #test3 {  display: list-item; list-style-image: url(images/bullet.gif); margin-left:20px; }
    </style>

    <div id="test3">item 1</div>
    <span id="test3">item 2</span>
    <p id="test3">item 3</p>
    

Values for list-style