CoderTools Web site

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

Description


list-style-image is a property / command to change the bullet of all elements with a display value of list-item. This includes not only <li> elements but any element with the display style set to list-item Specifically the <li> tags.
    list-style-image: url(URL);    /* e.g. list-style-image: url(images/image1.gif); */
    list-style-image: none;
    list-style-image: inherit;
    
See also: list-style, list-style-position, list-style-type
HTML & CSS Editor with FTP / FTPS

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 1
item 2

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


Name Values Description
list-style-image url(URL)
none
Specifies a url of an image to use as the bullet. Default is none.
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded.
list-style-position inside
outside
Specifies the positioning of the bullet. Inside for Default is outside.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/22/2017 5:26:07 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP