asp.net.ph

Skip Navigation LinksAbakada: Back to Basics > Language References > CSS Properties > Lists Properties > list-style-image Property

list-style-image | listStyleImage Property


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

Syntax

CSS { list-style-image: 'none' | 'url ( strUrl ) ' }
Script object.style.listStyleImage = 'url ( strUrl ) ' ]

Possible Values

none No image specified.
url ( strUrl ) Specifies the location of the image, where strUrl is an absolute or relative URL.

The property is read/write with a default value of none; the CSS attribute is inherited.

Remarks

When the image is available, it will replace the marker set with the listStyleType marker.

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

Example

The sample below uses inline event handlers to dynamically change an object’s listStyleImage in response to mouse events.

<ul onmouseover="this.style.listStyleImage='url( /asp.net.ph/shared/wink.gif ) '"
   onclick="this.style.listStyleImage='url( /asp.net.ph/shared/biggrin.gif ) '"
   ondblclick="this.style.listStyleImage='url( /asp.net.ph/shared/razz.gif ) '"
   onmouseout="this.style.listStyleImage='none'">
   ...
</ul>

 Show me 

Applies To

currentStyle, LI, OL, runtimeStyle, style, UL

See Also

list-style, list-style-position, list-style-type


Need a break ?
Suggested Reading

Check out related books at Amazon

© 2025 Reynald Nuñez and asp.net.ph.

If you have any question, comment or suggestion,
please send us a note