list-style-image

  • Revision slug: CSS/list-style-image
  • Revision title: list-style-image
  • Revision id: 25936
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Migrated data to new compatibility table.; 67 words added

Revision Content

{{ CSSRef() }}

Summary

The list-style-image CSS property sets the image that will be used as the list item marker. It is often more convenient to use the shortcut {{ cssxref("list-style") }}.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: elements with display:list-item
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: absolute URI or none

Syntax

list-style-image:  {{ Xref_cssuri() }} | none | inherit

Values

<uri>
Location of image to use as the marker.
none
Default value

Examples

{{ CSSLiveSample("list-style") }}

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

Browser compatibility

Browser Lowest version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

See also

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}

{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "es": "es/CSS/list-style-image" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> list-style-image </code>CSS property sets the image that will be used as the list item marker. It is often more convenient to use the shortcut {{ cssxref("list-style") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: elements with<code> display:list-item </code></li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: absolute URI or<code> none</code></li>
</ul>
<h3>Syntax</h3>
<pre class="eval">list-style-image:  {{ Xref_cssuri() }} | <em>none</em> | inherit
</pre>
<h3>Values</h3>
<dl> <dt>&lt;uri&gt;</dt> <dd>Location of image to use as the marker.</dd> <dt>none</dt> <dd>Default value</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>ul { list-style-image: url("images/arrow.gif") }
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>4.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>3.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS 2.1 #list-style-image</a></li>
</ul>
<h3>See also</h3>
<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p>
<p>{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "es": "es/CSS/list-style-image" } ) }}</p>
Revert to this revision