Compare OL list bullet style in HTML and CSS

Description

The following code shows how to compare OL list bullet style.

Example


<html>
<body>
<ol id="myL">
<li>Item 1.</li>
<li>Item 2.</li>
<li>Item 3.</li>
<li>Item 4.</li>
<li>Item 5.</li>
</ol><!-- ww  w  . ja v a2  s .  co  m-->
<input type="button"
value='Set listStyleType to "circle"'
onclick="myL.style.listStyleType='circle'">
<br>
<input type="button"
value='Set listStyleType to "square"'
onclick="myL.style.listStyleType='square'">
<br>
<input type="button"
value='Set listStyleType to "disc"'
onclick="myL.style.listStyleType='disc'">
<br>
<input type="button"
value='Set listStyleType to "lower-alpha"'
onclick="myL.style.listStyleType='lower-alpha'">
<br>
<input type="button"
value='Set listStyleType to "lower-roman"'
onclick="myL.style.listStyle='lower-roman'">
</body>
</html>

Click to view the demo

The code above generates the following result.

Compare OL list bullet style in HTML and CSS

Home »
  HTML CSS Tutorial »
    List »
      Ordered List

HTML CSS Tutorial Ordered List

Compare OL list bullet style in HTML and CS...