list-style-image

  • Revision slug: CSS/list-style-image
  • Revision title: list-style-image
  • Revision id: 25926
  • Created:
  • Creator: Rappo
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

list-style-image sets the image that will be used as the list item marker.

  • Initial value: none
  • Applies to: elements with 'display: list-item'
  • Inherited: yes
  • Percentages: N/A
  • Media: visual
  • Computed value: absolute URI or none

Syntax

list-style-image: <uri> | none | inherit

Values

uri 
Location of image to use as the marker.

Examples

ul {
    list-style-image: url("images/arrow.gif");
}

Specifications

Browser Compatibility

See Also

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

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>list-style-image</code> sets the image that will be used as the <a href="en/HTML/Element/li">list item</a> marker.
</p>
<ul><li> Initial value: none
</li><li> Applies to: elements with 'display: list-item'
</li><li> Inherited: yes
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: absolute URI or <code>none</code>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">list-style-image: &lt;uri&gt; | none | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> <code>uri</code> </dt><dd> Location of image to use as the marker.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<pre>ul {
    list-style-image: url("images/arrow.gif");
}
</pre>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#list-style-image">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#lists">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content0">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="See_Also"> See Also </h3>
<p><a href="en/CSS/list-style-image">list-style-image</a>, <a href="en/CSS/list-style">list-style</a>, <a href="en/CSS/list-style-type">list-style-type</a>, <a href="en/CSS/list-style-position">list-style-position</a>
</p>
Revert to this revision