La list-styleproprietà è una proprietà abbreviata che imposta i valori per tre diverse proprietà correlate all'elenco in una dichiarazione:
ul ( list-style: || || ; )Ecco un esempio della sintassi:
ul ( list-style: square outside none; )Che sarebbe la stessa della seguente versione a mano lunga:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )In breve, se vengono omessi dei valori, torneranno al loro stato iniziale.
Valori per list-style-type
La list-style-typeproprietà definisce il tipo di elenco impostando il contenuto di ogni indicatore, o punto elenco, nell'elenco. I valori delle parole chiave accettabili per list-style-typeincludono:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN ha un elenco più completo. I valori non di parole chiave sono stati introdotti in CSS3 e stanno iniziando a vedere un certo supporto, come:
ul ( list-style-type: "→"; )La seguente demo include un gruppo di elenchi non ordinati per dimostrare il valore di ciascuna parola chiave:
La list-style-typeproprietà si applica a tutti gli elenchi e a qualsiasi elemento impostato su display: list-item.
Il colore dell'indicatore della lista sarà qualunque sia il colore calcolato dell'elemento (impostato tramite la colorproprietà).
Valori per list-style-position
La list-style-positionproprietà definisce dove posizionare l'indicatore di elenco e accetta uno dei due valori: insideo outside. Questi sono dimostrati di seguito con la paddingrimozione dagli elenchi e l'aggiunta di un bordo rosso sinistro:
Valori per list-style-image
La list-style-imageproprietà determina se il marcatore elenco è impostato con un'immagine e accetta un valore "nessuno" o un URL che punta all'immagine:
ul ( list-style-image: url(images/bullet.png.webp); )Altre demo
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | Lavori | Lavori | Lavori |
IE6 / 7 non supporta tutti i valori delle parole chiave list-style-typee presenta anche un bug in cui gli elementi dell'elenco a virgola mobile non visualizzano il loro indicatore di elenco. Ciò viene risolto utilizzando un'immagine di sfondo (anziché list-style-image) sugli elementi dell'elenco.