list-style

Overview

W3C

Properties

background

background-attachment

The list-style property is a shorthand notation for setting list-style-type, list-style-image, and list-style-position.


                                list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

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

Values
DOM
Example | Values | image | none
Example | Values | image | uri
Example | Values | position | inside
Example | Values | position | outside
Example | Values | type | armenian
Example | Values | type | circle
Example | Values | type | decimal
Example | Values | type | decimal-leading-zero
Example | Values | type | disc
Example | Values | type | georgian
Example | Values | type | lower-alpha
Example | Values | type | lower-greek
Example | Values | type | lower-latin
Example | Values | type | lower-roman
Example | Values | type | none
Example | Values | type | square
Example | Values | type | upper-alpha
Example | Values | type | upper-greek
Example | Values | type | upper-latin
Example | Values | type | upper-roman
Example | DOM
References


                                list-style: 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
inside	Marker box is outside the principal block box
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
outside	Marker box is the first inline box in the principal block box, after which the element's content flows
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, ...)
uri	Uniform Resource Identifier (URL, URN, ...) inside url() parenthesis


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

<html>
  <head>
    <title>list-style</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">uri</a>
    <a href="/" onmouseover="mouseover2();">none</a><br>
    <a href="/" onmouseover="mouseover3();">inside</a>
    <a href="/" onmouseover="mouseover4();">outside</a><br>
    <a href="/" onmouseover="mouseover5();">disc</a>
    <a href="/" onmouseover="mouseover6();">circle</a>
    <a href="/" onmouseover="mouseover7();">square</a><br>
    <a href="/" onmouseover="mouseover8();">decimal</a>
    <a href="/" onmouseover="mouseover9();">decimal-leading-zero</a>
    <a href="/" onmouseover="mouseover10();">lower-roman</a>
    <a href="/" onmouseover="mouseover11();">upper-roman</a><br>
    <a href="/" onmouseover="mouseover12();">lower-greek</a>
    <a href="/" onmouseover="mouseover13();">upper-greek</a>
    <a href="/" onmouseover="mouseover14();">lower-latin</a>
    <a href="/" onmouseover="mouseover15();">upper-latin</a>
    <a href="/" onmouseover="mouseover16();">armenian</a>
    <a href="/" onmouseover="mouseover17();">georgian</a>
    <a href="/" onmouseover="mouseover18();">lower-alpha</a>
    <a href="/" onmouseover="mouseover19();">upper-alpha</a><br>
    <a href="/" onmouseover="mouseover20();">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.listStyle = "url(/assets/png/HappyFace.png)";
    }
    function mouseover2() {
      document.getElementById("id1").style.listStyle = "none";
    }
    function mouseover3() {
      document.getElementById("id1").style.listStyle = "inside";
    }
    function mouseover4() {
      document.getElementById("id1").style.listStyle = "outside";
    }
    function mouseover5() {
      document.getElementById("id1").style.listStyle = "disc";
    }
    function mouseover6() {
      document.getElementById("id1").style.listStyle = "circle";
    }
    function mouseover7() {
      document.getElementById("id1").style.listStyle = "square";
    }
    function mouseover8() {
      document.getElementById("id1").style.listStyle = "decimal";
    }
    function mouseover9() {
      document.getElementById("id1").style.listStyle = "decimal-leading-zero";
    }
    function mouseover10() {
      document.getElementById("id1").style.listStyle = "lower-roman";
    }
    function mouseover11() {
      document.getElementById("id1").style.listStyle = "upper-roman";
    }
    function mouseover12() {
      document.getElementById("id1").style.listStyle = "lower-greek";
    }
    function mouseover13() {
      document.getElementById("id1").style.listStyle = "upper-greek";
    }
    function mouseover14() {
      document.getElementById("id1").style.listStyle = "lower-latin";
    }
    function mouseover15() {
      document.getElementById("id1").style.listStyle = "upper-latin";
    }
    function mouseover16() {
      document.getElementById("id1").style.listStyle = "armenian";
    }
    function mouseover17() {
      document.getElementById("id1").style.listStyle = "georgian";
    }
    function mouseover18() {
      document.getElementById("id1").style.listStyle = "lower-alpha";
    }
    function mouseover19() {
      document.getElementById("id1").style.listStyle = "upper-alpha";
    }
    function mouseover20() {
      document.getElementById("id1").style.listStyle = "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 | image | none

Example | Values | image | uri

Example | Values | position | inside

Example | Values | position | outside

Example | Values | type | armenian

Example | Values | type | circle

Example | Values | type | decimal

Example | Values | type | decimal-leading-zero

Example | Values | type | disc

Example | Values | type | georgian

Example | Values | type | lower-alpha

Example | Values | type | lower-greek

Example | Values | type | lower-latin

Example | Values | type | lower-roman

Example | Values | type | none

Example | Values | type | square

Example | Values | type | upper-alpha

Example | Values | type | upper-greek

Example | Values | type | upper-latin

Example | Values | type | upper-roman

Example | DOM

References