list-style-image property

Sets or retrieves a value that indicates which image to use as a list-item marker for the object.

CSS 2.1, Section 5.6.4Internet Explorer 9

 

Syntax

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

Property values

none

Default. No image is specified.

url(sURL)

Location of the image, where sURL is an absolute or relative URL.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Remarks

The list-style-image property can be applied to any element when margin and display:list-item are applied. The display: list-item property is available starting with Microsoft Internet Explorer 6.

When the image is available, it replaces the marker that is set with the list-style-type marker.

If the left margin of the list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.

Examples

The following examples use the list-style-image attribute and the list-style-image property to set the image for markers.

This example uses ul as a selector in an embedded (global) style sheet to set the marker to the dot.gif image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style-image.htm

JavaScript
Copy 

<!DOCTYPE html>
<html>
<head>
  <title>list-style-image</title>
  <style>
    ul {
      list-style-image: url('http://samples.msdn.microsoft.com/Workshop/graphics/dot.gif');
    }
  </style>
</head>

<body>
  <p>
    The line item marker has been set by the stylesheet, specifying that all unordered lists 
    (<strong>UL</strong>) use the dot.gif image as the line marker.
  </p>
  <ul>
    <li>thing one</li>
    <li>thing two</li>
    <li>another thing</li>
    <li>too many things</li>
  </ul>
</body>
</html>

This example uses inline scripting to change the style of the list-item marker to an image when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyleImage.htm

JavaScript
Copy 

<!DOCTYPE html>
<html>
<head>
  <title>listStyleImage</title>
</head>

<body>
  <p>Mouseover the list and the list item markers will change from bullets to yellow spheres.</p>
  <ul onmouseover = 'this.style.listStyleImage = "url(http://samples.msdn.microsoft.com/Workshop/graphics/dot.gif)"' 
      onmouseout = "this.style.listStyleImage = ''" 
      style = "border: 1px solid black;">
    <li>thing one</li>
    <li>thing two</li>
    <li>another thing</li>
    <li>too many things</li>
  </ul>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show: