CSS Lists - Changing the list bullet using list-style-type
Description
list-style-type is a property specify which type of bullet to use.
Note: this applies not just to <li> tags but also applies to all elements with a
display value of
list-item.
The default is
disc.
list-style-type: disc; list-style-type: lower-greek;
list-style-type: circle; list-style-type: hewbrew;
list-style-type: square; list-style-type: armenian;
list-style-type: decimal-leading-zero; list-style-type: georgian;
list-style-type: lower-roman; list-style-type: cjk-ideographic;
list-style-type: upper-roman; list-style-type: hiragana;
list-style-type: upper-alpha; list-style-type: katakana;
list-style-type: lower-alpha; list-style-type: hiragana-iroha;
list-style-type: none; list-style-type: inherit;
See also: list-style, list-style-image, list-style-position.
Examples for list-style-type
Example 1:
The first example shows the default position of outside the left border of the list item:
<style>
#test { list-style-type: lower-greek; }
</style>
<ul id="test">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 2:
Decimal leading zeros:
<style>
#test2 li { list-style-type: decimal-leading-zero; }
</style>
<ul id="test2">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 3:
This time with a alternating positions of inside.
- test
- test
- test
- test
- test
- test
- test
- test
<ul>
<li style="list-style-type:disc">test</li>
<li style="list-style-type:circle">test</li>
<li style="list-style-type:square">test</li>
<li style="list-style-type:lower-greek">test</li>
<li style="list-style-type:lower-alpha">test</li>
<li style="list-style-type:hebrew">test</li>
<li style="list-style-type:armenian">test</li>
<li style="list-style-type:katakana">test</li>
</ul>
Values for list-style
| list-style-position |
inside
outside |
Specifies the positioning of the bullet. Inside for Default is outside. |
| list-style-type |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
decimal-leading-zero
lower-greek
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
none |
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded. |
| list-style-image |
url(URL)
none |
Specifies a url of an image to use as the bullet. Default is none. |