A list-stylepropriedade é uma propriedade abreviada que define valores para três propriedades diferentes relacionadas à lista em uma declaração:
ul ( list-style: || || ; )Aqui está um exemplo de sintaxe:
ul ( list-style: square outside none; )Que seria igual à seguinte versão extensa:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )Resumindo, se algum valor for omitido, ele voltará ao estado inicial.
Valores para list-style-type
A list-style-typepropriedade define o tipo de lista, definindo o conteúdo de cada marcador, ou marcador, na lista. Os valores de palavra-chave aceitáveis para list-style-typeincluem:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN tem uma lista mais completa. Valores que não são de palavra-chave foram introduzidos no CSS3 e estão começando a ver algum suporte, como:
ul ( list-style-type: "→"; )A demonstração a seguir inclui um grupo de listas não ordenadas para demonstrar cada valor de palavra-chave:
A list-style-typepropriedade se aplica a todas as listas e a qualquer elemento definido como display: list-item.
A cor do marcador de lista será qualquer que seja a cor calculada do elemento (definida por meio da colorpropriedade).
Valores para list-style-position
A list-style-positionpropriedade define onde posicionar o marcador da lista e aceita um de dois valores: insideou fora. Eles são demonstrados abaixo com o paddingremovido das listas e uma borda esquerda vermelha adicionada:
Valores para list-style-image
A list-style-imagepropriedade determina se o marcador de lista é definido com uma imagem e aceita um valor de "nenhum" ou um URL que aponta para a imagem:
ul ( list-style-image: url(images/bullet.png.webp); )Mais demos
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |
O IE6 / 7 não suporta todos os valores de palavra-chave para list-style-typee também tem um bug em que os itens de lista flutuante não exibem seu marcador de lista. Isso é resolvido usando uma imagem de plano de fundo (em vez de list-style-image) nos itens da lista.