Alterar a cor de um marcador em uma lista html?

86

Tudo que eu quero é ser capaz de mudar a cor de um marcador em uma lista para um 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.

Dave Haynes
fonte
Eu mesmo escolheria uma imagem e evitaria a marcação extra. É provavelmente a solução mais eficiente
Sam Murray-Sutton
8
Quem se importa com marcação "extra" como essa ... sério, você não perde nada fazendo isso.

Respostas:

159

O marcador obtém sua cor a partir do texto. Portanto, se você quiser ter um marcador de cor diferente do texto em sua lista, terá que 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 */
}
Prestaul
fonte
Exatamente o que eu precisava! Eu tenho uma lista de links e os links já têm um estilo de cor diferente aplicado a eles de qualquer maneira.
Dave Haynes,
Esta não é a maneira mais agradável de fazer isso. Por exemplo, isso não funcionará quando você tiver um cms com um editor WYSIWYG. Os elementos <span> não serão renderizados. O que você pode querer é trabalhar com: antes e: depois e deixar de fora os próprios bullits. Na verdade, esta é uma prática muito ruim.
Automagisch
2
@KoenHoutman, na época em que este foi escrito (2008) era a única técnica com suporte razoável. Ainda hoje não é uma má prática e ainda é a técnica com o mais amplo suporte de navegador, embora eu concorde que hoje (na maioria dos casos) eu optaria por usar :beforecomo na resposta do Marc abaixo.
Prestaul
Já que você está apenas mudando a apresentação do texto, uma btag seria mais apropriada.
Supuhstar
45

Consegui isso sem adicionar marcação, mas em vez disso usando li: before. Obviamente, isso tem todas as limitações do :before(sem suporte ao antigo IE), mas parece funcionar com o IE8, Firefox e Chrome após alguns testes muito limitados. Está funcionando em nosso ambiente de controlador, perguntando se alguém poderia verificar isso. O estilo de 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>
Marc
fonte
Esta é a maneira mais moderna com CSS3, em comparação com a resposta aceita
minni
17

Isso era impossível em 2008, mas se tornará possível em breve (espero)!

De acordo com a especificação W3C CSS3 , você pode ter controle total sobre qualquer número, glifo ou outro símbolo gerado antes de um item da lista com o ::markerpseudoelemento. 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 a partir de julho de 2016 , esta solução é apenas uma parte do W3C Working Draft e ainda não funciona em nenhum dos principais navegadores.

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

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

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

Jonathan Arkell
fonte
Já que você está apenas mudando a apresentação do texto, uma btag seria mais apropriada.
Supuhstar
1
Quando isso foi escrito, a tag b estava no meio de ser descontinuada em favor da tag forte. Mas sim, você está correto, agora a tag ab seria mais apropriada.
Jonathan Arkell
3

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

Ok, o fato é que você deve especificar uma tag interna para fazer o texto LIst no preto usual (ou o que você quiser). Mas também é verdade que você pode REDEFINIR quaisquer TAGS e tags internas com CSS. Portanto, 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>

fonte
você deve usar <span>. além disso, <b> está obsoleto.
the_drow
2
O contador de pontos para @the_drow, <b> não está obsoleto. stackoverflow.com/questions/1348683/…
Strixy
Definir uma cor padrão aplicada a um seletor específico corrigiu meu problema. Obrigado por esta dica.
David,
2

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

ul {
  list-style-image:url('gray-bullet.gif');
}
ghr
fonte
1
O OP explicitamente não queria usar uma imagem, mas me deparei com isso procurando uma maneira geral de substituir o marcador. Portanto, acho que essa resposta é boa para ser completa.
Zane
Aqui está um com o círculo SVG, que pode ser colorido facilmente:list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");
Ciantic
0

Envolva o texto dentro do item da lista com um intervalo (ou algum outro elemento) e aplique a cor do marcador ao item da lista e a cor do texto ao intervalo.


fonte
0

De acordo com as especificações W3C ,

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

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

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

fonte
0

Você pode usar o Jquery se tiver muitas páginas e não precisar editar a marcação por conta própria.

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
});
alaasdk
fonte
0

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

Se você deseja usar bibliotecas externas, o Font Awesome oferece ícones vetoriais escaláveis e, quando combinados com as classes auxiliares do Bootstrap (por exemplo text-success,), você pode fazer algumas listas muito legais e personalizáveis.

Aumentei o trecho da página de exemplos da lista Font Awesome abaixo:

Use fa-ule fa-lipara substituir facilmente 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>

Font Awesome (principalmente) oferece suporte ao IE8 e apenas ao IE7 se você usar a versão anterior 3.2.1 .

ovo
fonte
0

Funciona bem se definirmos a cor de cada elemento, por exemplo: Adicionei um pouco de 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;
}
Maomé
fonte
-1

Você pode usar CSS para conseguir isso. Ao especificar a lista com a cor e o 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 .


fonte
-1
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • 1
  • Dois
  • Três
  • NerdFury
    fonte
    -2

    Basta usar CSS:

    <li style='color:#e0e0e0'>something</li>
    
    Diodeus - James MacFarlane
    fonte
    Sim, foi o que eu pensei também ... mas estilizar a cor do texto muda a cor do texto assim como o marcador.
    Aeon de
    -5

    Você vai querer definir um "estilo de lista" via CSS e dar a ele um valor color :. Exemplo:

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