Export (0) Print
Expand All

list-style property

Sets or retrieves up to three separate list-style properties of the object.

CSS 2.1, Section 5.6.6Internet Explorer 9

 

Syntax

list-style: [ type || position || image ]

Property values

A variable of type String that specifies or receives up to three of the following values, in any order:

type

Any of the range of type values available to the list-style-type property.

position

Any of the range of position values available to the list-style-position property.

image

Any of the range of image values available to the list-style-image property.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Remarks

The list-style property is a composite property. When specifying both the type and image values, the image value takes precedence, unless the image value is set to none or the image pointed to by the URL cannot display.

The list-style property also applies to all elements on which the display property is set to list-item. To make the bullet points appear, you must explicitly set the margin property or set the list-style-position property to inside on these elements.

Examples

The following examples use the list-style attribute and the list-style property to set the list style.

This example uses ul and UL.compact as selectors in an embedded (global) style sheet to define the styles of two different unordered lists. For UL.compact to override the image that is set with the ul selector, you must explicitly set the image attribute to none.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style.htm


<!DOCTYPE html>
<html>

<head>
  <title>list-style</title>
  <style>
    ul {
      list-style: outside url('http://samples.msdn.microsoft.com/workshop/graphics/dot.gif');
    }

    .compact {
      list-style-image: none;
      list-style: inside circle;
    }
  </style>
</head>

<body>
  <p>
    The top list has <strong>list-style</strong> set to "outside url('dot.gif')". The bottom list has
    <strong>list-style</strong> set to "inside circle". Notice that the circle will override the image
    specified by the UL selector only if <strong>list-style-image</strong> is explicitly set to 'none'.
  </p>

  <ul style="width: 3cm">
    <li>first list item comes first</li>
    <li>second list item comes second</li>
  </ul>

  <ul class="compact">
    <li>first list item comes first</li>
    <li>second list item comes second</li>
  </ul>
</body>

</html>

This example uses inline scripting to change the style of the list. If the default image cannot be located, a hollow circle is used.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle.htm


<!DOCTYPE html>
<html>
<head>
  <title>listStyle</title>
</head>

<body>
  <h1>listStyle Property</h1>
  <p>
    Move the mouse pointer over the list to make the list item markers change from 
    hollow circles to colored spheres. On the mouseout event, the marker changes to 
    a circle because it was set as the default if the image is not found. Click the 
    list to change the circle markers to numbers with periods.
  </p>
  <ul onmouseover="this.style.listStyle='url(http://samples.msdn.microsoft.com/workshop/graphics/dot.gif) circle'" 
    onmouseout="this.style.listStyle='url(none)'" 
    onclick="this.style.listStyle='url(none) decimal'">
    <li>thing one</li>
		<li>thing two</li>
		<li>another thing</li>
		<li>too many things</li>
  </ul>
</body>
</html>

The following example sets the display property to list-item, a new possible value as of Internet Explorer 6, to demonstrate that the list-style property can also apply to elements on which the display property is set.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle_2.htm



<!DOCTYPE html>
<html>

<head>
  <title>listStyle</title>
</head>

<body>
  <h1>listStyle Property: 'list-item" Value</h1>
  <p>Move the mouse pointer over the red text to see the value of the <strong>display</strong> property set on the SPAN element change to 'list-item'. 
    Notice that a bullet point appears, denoting a list, and that the first SPAN element renders as a block element.</p>
  <span
    style="margin-left: 20pt; font-size: 14pt; color: red; list-style-position: inside"
    onmouseover="this.style.display='list-item'"
    onmouseout="this.style.display='inline'">A line of text...</span>
  <span style="font-size: 14pt">followed by this inline SPAN element.</span>
</body>

</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show:
© 2014 Microsoft