Atributo CSS list-style-image

Definição e uso

A propriedade list-style-image usa uma imagem para substituir o marcador do item da lista.

Descrição

Esta propriedade especifica a imagem a ser usada como sinalizador de item de lista ordenada ou não ordenada. A posição da imagem em relação ao conteúdo do item da lista é geralmente controlada pela propriedade list-style-position.

Comentário:Sempre especifique uma propriedade "list-style-type" para caso a imagem não esteja disponível.

Veja também:

Tutorial do CSSLista CSS

Manual do CSSAtributo CSS list-style

Manual do HTML DOMPropriedade listStyleImage

Exemplo

Definir a imagem como marcador do item da lista:

ul
  {
  list-style-image: url("/i/arrow.gif");
  list-style-type: quadrado;
  }

Experimente você mesmo

Sintaxe do CSS

list-style-image: nada|url|initial|inherit;

Valor da propriedade

Valor Descrição
URL Caminho da imagem.
nada Padrão. Não há gráfico exibido.
inherit Define que a propriedade list-style-image deve ser herdada do elemento pai.

Detalhes técnicos

Valor padrão: nada
Herança: sim
Versão: CSS1
Sintaxe do JavaScript: object.style.listStyleImage="url('/images/blueball.gif')"

Mais exemplos

Usar imagem como marcador de itens da lista
Este exemplo demonstra como usar uma imagem como marcador de itens da lista.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0