Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 25937 of list-style-image

  • Revision slug: CSS/list-style-image
  • Revision title: list-style-image
  • Revision id: 25937
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Removed old browser compatibility table.; 9 words added, 46 words removed

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

{{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

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

{{ wiki.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") }

<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>{{template.Cssxref("list-style")}}, {{template.Cssxref("list-style-type")}}, {{template.Cssxref("list-style-position")}}</p>
<p>{{ wiki.languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "es": "es/CSS/list-style-image" } ) }}</p></pre>
Revert to this revision