mozilla

Compare Revisions

list-style-type

Change Revisions

Revision 60845:

Revision 60845 by Wjjohnst on

Revision 60846:

Revision 60846 by Jürgen Jeka on

Title:
list-style-type
list-style-type
Slug:
CSS/list-style-type
CSS/list-style-type
Tags:
css, "CSS Reference", NeedsMobileBrowserCompatibility
css, "CSS Reference", NeedsMobileBrowserCompatibility
Content:

Revision 60845
Revision 60846
n10    <h3 name="Summary">n10    <h3>
n14      <code>list-style-type</code> specifies appearance of the <an14      The <code>list-style-type</code> CSS property specifies app
> href="/en/HTML/Element/li" title="en/HTML/Element/li">list item<>earance of a <a href="/en/HTML/Element/li" title="en/HTML/Element
>/a> marker.>/li">list item</a> marker.
n19      <li>Applies to: elements with 'display: list-item'n19      <li>Applies to: elements with<code>&nbsp; display: list-ite
 >m</code>
n30    <h3 name="Syntax">n30    <h3>
n34 list-style-type:  &lt;std-list-style-name&gt; | {{ Cssxref("nonen34 list-style-type:  &lt;list-style-name&gt; | {{ Cssxref("none") }
>") }} | {{ Cssxref("inherit") }} ;>}| {{ Cssxref("inherit") }}
n36    <h3 name="Values">n36    <h3>
n41        &lt;std-list-style-name&gt;n41        none
42      </dt>
43      <dd>
44        A standard list style name <code>disc, circle, square, de
>cimal, decimal-leading-zero, lower-roman, upper-roman, lower-gree 
>k, lower-latin, upper-latin, armenian, georgian, lower-alpha, upp 
>er-alpha</code> 
45      </dd>
46      <dt>42      </dt>
47        <code>disc</code>
48      </dt>43      <dd>
44        No item marker is shown.<br>
49      <dd>45      </dd>
50        A filled circle.46    </dl>
51        <ol>47    <p>
52          <li style="list-style-type: disc;">Example48      <strong>&lt;list-style-name&gt;</strong> is one of the foll
 >owing:
53          </li>49    </p>
50    <dl>
51      <dt>
52        disc
53      </dt>
54      <dd>
54        </ol>55        <ol>
55      </dd>56          <li style="list-style-type: disc;">A filled circle (def
 >ault value)
56      <dt>57          </li>
57        <code>circle</code>
58      </dt>
59      <dd>
60        A hollow circle.
61        <ol>58        </ol>
62          <li style="list-style-type: circle;">Example59      </dd>
63          </li>60      <dt>
61        circle
62      </dt>
63      <dd>
64        </ol>64        <ol>
65      </dd>65          <li style="list-style-type: circle;">A hollow circle
66      <dt>66          </li>
67        <code>square</code>
68      </dt>
69      <dd>
70        A filled square.
71        <ol>67        </ol>
72          <li style="list-style-type: square;">Example68      </dd>
73          </li>69      <dt>
70        square
71      </dt>
72      <dd>
74        </ol>73        <ol>
75      </dd>74          <li style="list-style-type: square;">A filled square
76      <dt>75          </li>
77        <code>decimal</code>
78      </dt>
79      <dd>
80        Decimal numbers, beginning with 1.
81        <ol>76        </ol>
82          <li style="list-style-type: decimal;">Example77      </dd>
83          </li>78      <dt>
79        decimal
80      </dt>
81      <dd>
84        </ol>82        <ol>
85      </dd>83          <li style="list-style-type: decimal;">Decimal numbers, 
 >beginning with 1.
86      <dt>84          </li>
87        <code>decimal-leading-zero</code>
88      </dt>
89      <dd>
90        Decimal numbers padded by initial zeros (e.g., 01, 02, 03
>, ..., 98, 99). 
91        <ol>85        </ol>
92          <li style="list-style-type: decimal-leading-zero;">Exam86      </dd>
>ple 
93          </li>87      <dt>
88        decimal-leading-zero
89      </dt>
90      <dd>
94        </ol>91        <ol>
95      </dd>92          <li style="list-style-type: decimal-leading-zero;">Deci
 >mal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 9
 >9)
96      <dt>93          </li>
97        <code>lower-roman</code>
98      </dt>
99      <dd>
100        Lowercase roman numerals (i, ii, iii, iv, v, etc.).
101        <ol>94        </ol>
102          <li style="list-style-type: lower-roman;">Example95      </dd>
103          </li>96      <dt>
97        lower-roman
98      </dt>
99      <dd>
104        </ol>100        <ol>
105      </dd>101          <li style="list-style-type: lower-roman;">Lowercase rom
 >an numerals (i, ii, iii, iv, v, etc.)
106      <dt>102          </li>
107        <code>upper-roman</code>
108      </dt>
109      <dd>
110        Uppercase roman numerals (I, II, III, IV, V, etc.).
111        <ol>103        </ol>
112          <li style="list-style-type: upper-roman;">Example104      </dd>
113          </li>105      <dt>
106        upper-roman
107      </dt>
108      <dd>
114        </ol>109        <ol>
115      </dd>110          <li style="list-style-type: upper-roman;">Uppercase rom
 >an numerals (I, II, III, IV, V, etc.)
116      <dt>111          </li>
117        <code>lower-greek</code>
118      </dt>
119      <dd>
120        Lowercase classical Greek alpha, beta, gamma, ... (α, β, 
>γ, ...). 
121        <ol>112        </ol>
122          <li style="list-style-type: lower-greek;">Example113      </dd>
123          </li>114      <dt>
115        lower-greek
116      </dt>
117      <dd>
124        </ol>118        <ol>
125      </dd>119          <li style="list-style-type: lower-greek;">Lowercase cla
 >ssical Greek alpha, beta, gamma, ... (α, β, γ, ...)
126      <dt>120          </li>
127        <code>lower-latin</code>
128      </dt>
129      <dd>
130        Lowercase ascii letters (a, b, c, ... z).
131        <ol>121        </ol>
132          <li style="list-style-type: lower-alpha;">Example122      </dd>
133          </li>123      <dt>
124        lower-alpha | lower-latin
125      </dt>
126      <dd>
134        </ol>127        <ol>
135      </dd>128          <li style="list-style-type: lower-alpha;">Lowercase ASC
 >II letters (a, b, c, ... z)
136      <dt>129          </li>
137        <code>upper-latin</code>130          <li style="list-style-type: lower-alpha;">
138      </dt>131            <code>lower-latin</code> is not supported in IE7 and 
 >lower, see Browser compatibility section below
139      <dd>132          </li>
140        Uppercase ascii letters (A, B, C, ... Z).
141        <ol>133        </ol>
142          <li style="list-style-type: upper-alpha;">Example134      </dd>
143          </li>135      <dt>
136        upper-alpha | upper-latin
137      </dt>
138      <dd>
144        </ol>139        <ol>
145      </dd>140          <li style="list-style-type: upper-alpha;">Uppercase ASC
 >II letters (A, B, C, ... Z)
146      <dt>141          </li>
147        <code>armenian</code>142          <li style="list-style-type: upper-alpha;">
148      </dt>143            <code>upper-latin</code> is not supported in IE7 and 
 >lower, see below
149      <dd>144          </li>
150        Traditional Armenian numbering (ayb/ayp, ben/pen, gim/kee
>m, ...). 
151        <ol>145        </ol>
152          <li style="list-style-type: armenian;">Example146      </dd>
153          </li>147      <dt>
148        armenian
149      </dt>
150      <dd>
154        </ol>151        <ol>
155      </dd>152          <li style="list-style-type: armenian;">Traditional Arme
 >nian numbering (ayb/ayp, ben/pen, gim/keem, ...)
156      <dt>153          </li>
157        <code>georgian</code>
158      </dt>
159      <dd>
160        Traditional Georgian numbering (an, ban, gan, ..., he, ta
>n, in, in-an, ...). 
161        <ol>154        </ol>
162          <li style="list-style-type: georgian;">Example155      </dd>
163          </li>156      <dt>
157        georgian
158      </dt>
159      <dd>
164        </ol>160        <ol>
165      </dd>161          <li style="list-style-type: georgian;">Traditional Geor
 >gian numbering (an, ban, gan, ..., he, tan, in, in-an, ...)
166      <dt>162          </li>
167        <code>lower-alpha</code>
168      </dt>
169      <dd>
170        Same as <code>lower-latin</code>.
171        <ol>163        </ol>
172          <li style="list-style-type: lower-alpha;">Example
173          </li>
174        </ol>
175      </dd>
176      <dt>
177        <code>upper-alpha</code>
178      </dt>
179      <dd>164      </dd>
180        Same as <code>upper-latin</code>.
181        <ol>
182          <li style="list-style-type: upper-alpha;">Example
183          </li>
184        </ol>
185      </dd>165    </dl>
166    <h4>
167      Mozilla extensions
168    </h4>
169    <p>
170      Extended set of values provided by Mozilla (Firefox) to sup
 >port list types in other languages.
171    </p>
186      <dt>172    <dl>
187        <code>none</code>
188      </dt>173      <dt>
189      <dd>
190        No bullet type.
191        <ol>
192          <li style="list-style-type: none;">Example
193          </li>
194        </ol>
195      </dd>
196      <dd>
197        <h3>
198          Mozilla extensions
199        </h3>
200        <p>
201          Extended set of values provided by Mozilla to support l
>ist types in other languages. Note these will not display correct 
>ly in non-Gecko based browsers. 
202        </p>
203      </dd>
204      <dt>
205        <code>-moz-arabic-indic</code>174        -moz-arabic-indic
n214        <code>-moz-bengali</code>n183        -moz-bengali
n223        <code>-moz-cjk-earthly-branch</code>n192        -moz-cjk-earthly-branch
n232        <code>-moz-cjk-heavenly-stem</code>n201        -moz-cjk-heavenly-stem
n241        <code>-moz-devanagari</code>n210        -moz-devanagari
n250        <code>-moz-ethiopic-halehame</code>n219        -moz-ethiopic-halehame
n259        <code>-moz-ethiopic-halehame-am</code>n228        -moz-ethiopic-halehame-am
n268        <code>-moz-ethiopic-halehame-ti-er</code>n237        -moz-ethiopic-halehame-ti-er
n277        <code>-moz-ethiopic-halehame-ti-et</code>n246        -moz-ethiopic-halehame-ti-et
n286        <code>-moz-ethiopic-numeric</code>n255        -moz-ethiopic-numeric
n295        <code>-moz-gujarati</code>n264        -moz-gujarati
n304        <code>-moz-gurmukhi</code>n273        -moz-gurmukhi
n313        <code>-moz-hangul</code>n282        -moz-hangul
n322        <code>-moz-hangul-consonant</code>n291        -moz-hangul-consonant
n331        <code>-moz-japanese-formal</code>n300        -moz-japanese-formal
n340        <code>-moz-japanese-informal</code>n309        -moz-japanese-informal
n349        <code>-moz-kannada</code>n318        -moz-kannada
n358        <code>-moz-khmer</code>n327        -moz-khmer
n367        <code>-moz-lao</code>n336        -moz-lao
n376        <code>-moz-malayalam</code>n345        -moz-malayalam
n385        <code>-moz-myanmar</code>n354        -moz-myanmar
n394        <code>-moz-oriya</code>n363        -moz-oriya
n403        <code>-moz-persian</code>n372        -moz-persian
n412        <code>-moz-simp-chinese-formal</code>n381        -moz-simp-chinese-formal
n421        <code>-moz-simp-chinese-informal</code>n390        -moz-simp-chinese-informal
n430        <code>-moz-tamil</code>n399        -moz-tamil
n439        <code>-moz-telugu</code>n408        -moz-telugu
n448        <code>-moz-thai</code>n417        -moz-thai
n457        <code>-moz-trad-chinese-formal</code>n426        -moz-trad-chinese-formal
n466        <code>-moz-trad-chinese-informal</code>n435        -moz-trad-chinese-informal
n475        <code>-moz-urdu</code>n444        -moz-urdu
n484    <h3 name="Examples">n453    <h3>
n488ol {n457ol { list-style-type: upper-alpha; }
489    list-style-type: decimal;458 
490}459/* or use the shortcut "list-style": */
460ol { list-style: upper-alpha; }
n492    <h3 name="Notes">n462    <h3>
n496      This specification does not define how alphabetic systems wn466      The CSS specification does not define how alphabetic system
>rap at the end of the alphabet. For instance, after 26 list items>s wrap at the end of the alphabet. For instance, after 26 list it
>, <code>lower-latin</code> rendering is undefined (and will conti>ems, <code>lower-latin</code> rendering is undefined. Firefox and
>nue as AA, AB, AC,...). Therefore, for long lists, it is recommen> other browsers will continue as AA, AB, AC,... For long lists, i
>ded that authors specify true numbers.>t is recommended that authors specify true numbers.
467    </p>
497    </p>468    <h3>
498    <h3 name="Specifications">
n503        <a class="external" href="http://www.w3.org/TR/CSS1#list-n473        <a class="external" href="http://www.w3.org/TR/CSS21/gene
>style-type">CSS 1</a>>rate.html#propdef-list-style-type">CSS 2.1 #list-style-type</a>
n506        <a class="external" href="http://www.w3.org/TR/CSS21/genen
>rate.html#propdef-list-style-type">CSS 2.1</a> 
507      </li>
508      <li>
509        <a class="external" href="http://www.w3.org/TR/css3-lists476        <a class="external" href="http://www.w3.org/TR/css3-lists
>/#list-style-type">css3-lists</a>>/#list-style-type">CSS 3 Lists #list-style-type</a> Early working
 > draft
n512    <h3 name="Browser_Compatibility">n479    <h3>
t515    <h3 name="See_Also">t482    <table class="standard-table">
483      <tbody>
484        <tr>
485          <th>
486            Browser
487          </th>
488          <th>
489            Lowest Version
490          </th>
491        </tr>
492        <tr>
493          <td>
494            Internet Explorer
495          </td>
496          <td>
497            yes
498          </td>
499        </tr>
500        <tr>
501          <td>
502            Firefox (Gecko)
503          </td>
504          <td>
505            1.0 (?)
506          </td>
507        </tr>
508        <tr>
509          <td>
510            Opera
511          </td>
512          <td>
513            yes
514          </td>
515        </tr>
516        <tr>
517          <td>
518            Safari (WebKit)
519          </td>
520          <td>
521            1.0 (?)
522          </td>
523        </tr>
524      </tbody>
525    </table>
526    <h3>

Back to History