list-style-type property

Sets or retrieves the predefined type of the line-item marker for the object.

CSS 2.1, Section 5.6.3Internet Explorer 9

 

Syntax

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none

Property values

The decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, and georgian values are supported starting with Internet Explorer 8.

disc

Default. Solid circles.

circle

Outlined circles.

square

Solid squares.

decimal

1, 2, 3, 4, and so on.

decimal-leading-zero

01, 02, 03, 04, and so on.

lower-alpha

A, b, c, d, and so on.

upper-alpha

A, B, C, D, and so on.

lower-roman

I, ii, iii, iv, and so on.

upper-roman

I, II, III, IV, and so on.

lower-greek

Lowercase classical Greek: alpha, beta, gamma, and so on.

lower-latin

A, b, c, d, and so on.

upper-latin

A, B, C, D, and so on.

armenian

Traditional Armenian numbering.

georgian

Traditional Georgian numbering: an, ban, gan, don, and so on.

none

No marker is shown.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Valuedisc

Standards information

Remarks

The list-style-type property determines the appearance of the list-item marker if the value of the list-style-image attribute is set to none, or if the image pointed to by the URL cannot be displayed.

The list-style-type property can be applied to any element when margin and display:list-item are applied. The display:list-item property is available starting with Microsoft Internet Explorer 6.

If the left margin of a line item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.

Below you can see the different values for list-style-type.

The different values for the list-style-type property

Examples

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

This example uses ul as a selector in an embedded (global) style sheet to change the marker type to circle.

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

HTML
Copy 

<style>
    ul { list-style-type:circle }
</style>

This example uses inline scripting to change the marker type on when an onmouseover event occurs.

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

HTML
Copy 

<ul onmouseover="this.style.listStyleType='circle'">

This example demonstrates the newer line-item markers added for Internet Explorer 8.

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

HTML
Copy 

<style type="text/css">
.decleadzero {
	list-style-type: decimal-leading-zero;
}
...
</style>
<body>
 <ol class="decleadzero">
  <li>This is the first item. </li>
  <li>This is the second item. </li>
  <li>This is the third item. </li>
 </ol>
    ...
</body>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show: