CSS Attributes Index Classification Attributes
Sets or retrieves three list object properties at once: list-style-type, list-style-position, and list-style-image.
| CSS |
{ list-style: list-style-type | list-style-position | list-style-image } |
| Script |
object.style.listStyle = sStyle ] |
| list-style-type |
Any of the range of values available to the listStyleType property. |
| list-style-position |
Any of the range of values available to the listStylePosition property. |
| list-style-image |
Any of the range of values available to the listStyleImage property. |
The property is read/write with a default value set by the browser; the CSS attribute is inherited.
This shorthand property can specify both a URL and a list-style-type, which will be used if the URL is not found.
If the left margin of a 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.
The sample below uses UL and UL.compact as selectors in an embedded stylesheet to define the list-style attributes of two different unordered lists. Notice that in order for UL.compact to override the image set with the UL selector, the list-style-image must explicitly be set to none.
<style>
ul { list-style: outside url( 'wink.gif' ) }
ul.compact { list-style: inside circle;
list-style-image:none }
</style>
. . .
<body>
<ul>
<li>
<li>
<li>...
</ul>
<ul class=compact>
<li>
<li>
<li>...
</ul>
This feature requires Microsoft® Internet Explorer® 4.0 or later.
Show me
The sample below uses inline event handlers to dynamically change an onject's listStyle properties. The default circle will be used if the image cannot be found.
<ul onmouseover=
"this.style.listStyle='url( wink.gif ) circle'">
This feature requires Microsoft® Internet Explorer® 4.0 or later.
Show me