Właściwość CSSInterakcja i inne
list-style-type
Ustawia rodzaj znacznika elementów listy: kropki, cyfry, litery lub własny symbol.
- Wartość domyślna
disc- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- elementy listy (display: list-item)
- JavaScript
element.style.listStyleType = "square"
Przykład
#CSS
.checklist {
list-style-type: "✅ ";
}
.nav-list {
list-style-type: none;
padding: 0;
}HTML przykładu
<ul style="list-style-type: '✅ '; margin: 0;">
<li>Ukończ moduł o Flexboxie</li>
<li>Zrób zadanie podsumowujące</li>
</ul>Podgląd
Definicja i zastosowanie
#Właściwość list-style-type zmienia znaczniki przed elementami list <ul> i <ol>. Do wyboru są kształty (disc, circle, square), numeracje (decimal, lower-alpha, upper-roman) i wiele systemów numeracji różnych języków.
Możesz też podać własny napis, na przykład "✓ " albo "→ ", który zastąpi kropkę. Wartość none usuwa znaczniki, co jest częste w menu nawigacyjnych.
Właściwość jest dziedziczona i działa na elementach z display: list-item, czyli domyślnie na <li>.
Składnia
#Składnia
list-style-type: disc | circle | square | decimal | lower-alpha | upper-roman | none | "<napis>" | …;Wartości
#Wartości w praktyce
#disc
Pełne kółka, domyślne dla list punktowanych.
.demo { list-style-type: disc; }square
Kwadraciki.
.demo { list-style-type: square; }decimal
Liczby arabskie: 1, 2, 3.
.demo { list-style-type: decimal; }upper-roman
Liczby rzymskie: I, II, III.
.demo { list-style-type: upper-roman; }"✓ "
Własny znak przed każdym elementem.
.demo { list-style-type: "✓ "; }none
Brak znaczników.
.demo { list-style-type: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Listy bez znaczników (
none) w Safari mogą przestać być ogłaszane jako listy przez czytnik ekranu. W nawigacji dodajrole="list"do<ul>. - Kolor i rozmiar samego znacznika zmienisz pseudoelementem
::marker.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.