list-style-type

The list-style-type property specifies appearance of the list item marker if list-style-image has the value "none" or if the image pointed to by the URI cannot be displayed.


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

Initial:	disc
Applies To:	elements with display: list-item
Inherited:	yes
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | armenian
Example | Values | circle
Example | Values | decimal
Example | Values | decimal-leading-zero
Example | Values | disc
Example | Values | georgian
Example | Values | lower-alpha
Example | Values | lower-greek
Example | Values | lower-latin
Example | Values | lower-roman
Example | Values | none
Example | Values | square
Example | Values | upper-alpha
Example | Values | upper-greek
Example | Values | upper-latin
Example | Values | upper-roman
Example | DOM
References


                                list-style-type: value;


Value:	Description:
armenian	Traditional Armenian numbering
circle	Circle glyph
decimal	Decimal numbers, beginning with 1
decimal-leading-zero	Decimal numbers padded by initial zeros (01, 02, 03, ... 98, 99)
disc	Disc glyph
georgian	Traditional Georgian numbering (an, ban, gan, ... he, tan, in, in-an, ...)
inherit	Takes the same computed value as the property for the element's parent
lower-alpha	Lowercase ascii letters (a, b, c, ... z)
lower-greek	Lowercase classical Greek (α, β, γ, ...)
lower-latin	Lowercase ascii letters (a, b, c, ... z)
lower-roman	Lowercase roman numerals (i, ii, iii, iv, v, ...)
none	No marker
square	Square glyph
upper-alpha	Uppercase ascii letters (A, B, C, ... Z)
upper-greek	Uppercase classical Greek (Α, Β, Γ, ...)
upper-latin	Uppercase ascii letters (A, B, C, ... Z)
upper-roman	Uppercase roman numerals (I, II, III, IV, V, ...)


                                [window.]document.getElementById("element-id").style.listStyleType = "list-style-type";

<html>
  <head>
    <title>list-style-type</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">disc</a>
    <a href="/" onmouseover="mouseover2();">circle</a>
    <a href="/" onmouseover="mouseover3();">square</a><br>
    <a href="/" onmouseover="mouseover4();">decimal</a>
    <a href="/" onmouseover="mouseover5();">decimal-leading-zero</a>
    <a href="/" onmouseover="mouseover6();">lower-roman</a>
    <a href="/" onmouseover="mouseover7();">upper-roman</a><br>
    <a href="/" onmouseover="mouseover8();">lower-greek</a>
    <a href="/" onmouseover="mouseover9();">upper-greek</a>
    <a href="/" onmouseover="mouseover10();">lower-latin</a>
    <a href="/" onmouseover="mouseover11();">upper-latin</a>
    <a href="/" onmouseover="mouseover12();">armenian</a>
    <a href="/" onmouseover="mouseover13();">georgian</a>
    <a href="/" onmouseover="mouseover14();">lower-alpha</a>
    <a href="/" onmouseover="mouseover15();">upper-alpha</a><br>
    <a href="/" onmouseover="mouseover16();">none</a>
    <p>paragraph</p>
    <ul id="id1">
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
    </ul>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.listStyleType = "disc";
    }
    function mouseover2() {
      document.getElementById("id1").style.listStyleType = "circle";
    }
    function mouseover3() {
      document.getElementById("id1").style.listStyleType = "square";
    }
    function mouseover4() {
      document.getElementById("id1").style.listStyleType = "decimal";
    }
    function mouseover5() {
      document.getElementById("id1").style.listStyleType = "decimal-leading-zero";
    }
    function mouseover6() {
      document.getElementById("id1").style.listStyleType = "lower-roman";
    }
    function mouseover7() {
      document.getElementById("id1").style.listStyleType = "upper-roman";
    }
    function mouseover8() {
      document.getElementById("id1").style.listStyleType = "lower-greek";
    }
    function mouseover9() {
      document.getElementById("id1").style.listStyleType = "upper-greek";
    }
    function mouseover10() {
      document.getElementById("id1").style.listStyleType = "lower-latin";
    }
    function mouseover11() {
      document.getElementById("id1").style.listStyleType = "upper-latin";
    }
    function mouseover12() {
      document.getElementById("id1").style.listStyleType = "armenian";
    }
    function mouseover13() {
      document.getElementById("id1").style.listStyleType = "georgian";
    }
    function mouseover14() {
      document.getElementById("id1").style.listStyleType = "lower-alpha";
    }
    function mouseover15() {
      document.getElementById("id1").style.listStyleType = "upper-alpha";
    }
    function mouseover16() {
      document.getElementById("id1").style.listStyleType = "none";
    }
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | armenian

Example | Values | circle

Example | Values | decimal

Example | Values | decimal-leading-zero

Example | Values | disc

Example | Values | georgian

Example | Values | lower-alpha

Example | Values | lower-greek

Example | Values | lower-latin

Example | Values | lower-roman

Example | Values | none

Example | Values | square

Example | Values | upper-alpha

Example | Values | upper-greek

Example | Values | upper-latin

Example | Values | upper-roman

Example | DOM

References