Existe uma maneira fácil de alterar a cor de um marcador em uma lista?

https://stackoverflow.com/questions/76564

09-06-2019
|

Pergunta

Tudo que eu quero é poder mudar a cor de um marcador em uma lista para cinza claro.O padrão é preto e não consigo descobrir como alterá-lo.

Eu sei que poderia usar apenas uma imagem;Prefiro não fazer isso se puder evitar.

Solução

O marcador obtém sua cor do texto.Portanto, se você quiser ter um marcador de cor diferente do texto em sua lista, precisará adicionar alguma marcação.

Envolva o texto da lista em um intervalo:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Em seguida, modifique ligeiramente suas regras de estilo:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

Outras dicas

Consegui isso sem adicionar marcação, mas usando li:before.Isto obviamente tem todas as limitações de :before (sem suporte antigo ao IE), mas parece funcionar com IE8, Firefox e Chrome após alguns testes muito limitados.Está funcionando em nosso ambiente de controlador, imaginando se alguém poderia verificar isso.O estilo do marcador também é limitado pelo que está em Unicode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

Isto era impossível em 2008, mas será possível em breve (espero)!

De acordo com A especificação CSS3 do W3C, você pode ter controle total sobre qualquer número, glifo ou outro símbolo gerado antes de um item da lista com o ::marker pseudo-elemento.Para aplicar isso à solução da resposta mais votada:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

Exemplo JSFiddle

Observe, porém, que em julho de 2016, esta solução é apenas uma parte do rascunho de trabalho do W3C e ainda não funciona em nenhum dos principais navegadores.

Se você deseja esse recurso, faça o seguinte:

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

o grande problema desse método é a marcação extra.(a tag span)

Olá, talvez esta resposta esteja atrasada, mas é a correta para conseguir isso.

Ok, o fato é que você deve especificar uma tag interna para fazer com que o texto da LIst fique no preto usual (ou o que você quiser).Mas também é verdade que você pode REDEFINIR quaisquer TAGS e tags internas com CSS.Então a melhor maneira de fazer isso é usar uma tag SHORTER para a redefinição

Use esta definição CSS:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

E este código html:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Você obtém o resultado necessário.Além disso, você pode fazer com que cada disco tenha uma cor diferente:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

Basta fazer um marcador em um programa gráfico e usar list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}

Envolva o texto no item da lista com uma extensão (ou algum outro elemento) e aplique a cor do marcador ao item da lista e a cor do texto à extensão.

Conforme Especificação W3C,

As propriedades da lista ...não permitir que os autores especifiquem estilos distintos (cores, fontes, alinhamento, etc.) para o marcador de lista...

Mas a ideia com um intervalo dentro da lista acima deve funcionar bem!

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Você pode usar Jquery se tiver muitas páginas e não precisar editar a marcação sozinho.

aqui está um exemplo simples:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});

Para uma pergunta de 2008, pensei em adicionar uma resposta mais recente e atualizada sobre como alterar a cor dos marcadores em uma lista.

Se você estiver disposto a usar bibliotecas externas, Font Awesome oferece ícones vetoriais escaláveis, e quando combinado com Classes auxiliares do Bootstrap (por exemplo. text-success), você pode fazer algumas listas bem legais e personalizáveis.

Eu ampliei o extrato de a página de exemplos da lista Font Awesome abaixo:

Usar fa-ul e fa-li para substituir facilmente os marcadores padrão em listas não ordenadas.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Fonte incrível (principalmente) suporta IE8, e só oferece suporte ao IE7 se você usar o versão mais antiga 3.2.1.

Funciona também se definirmos a cor para cada elemento, por exemplo:Eu adicionei alguma margem à esquerda agora.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}

Você poderia usar CSS para conseguir isso.Ao especificar a lista na cor e estilo de sua escolha, você também pode especificar o texto com uma cor diferente.

Siga o exemplo em http://www.echoecho.com/csslists.htm.

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Dois

Três

Basta usar CSS:

<li style='color:#e0e0e0'>something</li>

Você desejará definir um "estilo de lista" via CSS e dar uma cor a ele:valor.Exemplo:

ul.colored {list-style: color: green;}

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow