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.
Respostas:
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 */
}
:beforecomo na resposta do Marc abaixo.
btag seria mais apropriada.
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>
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 */
}
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:
<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)
btag seria mais apropriada.
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>
Basta inserir um marcador em um programa gráfico e usar list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
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");
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.
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!
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
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
});
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-ulefa-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 .
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;
}
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 .
Basta usar CSS:
<li style='color:#e0e0e0'>something</li>