it-swarm-pt.tech

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

Tudo que eu quero é poder 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 eu poderia apenas usar uma imagem; Eu prefiro não fazer isso se puder evitar.

81
Dave Haynes

A bala obtém sua cor do texto. Então, se você quiser ter um marcador de cores diferente do texto na sua lista, você terá que adicionar alguma marcação.

Enrole 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 suas regras de estilo levemente:

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

Eu consegui isso sem adicionar marcação, mas usando li: before. Isso obviamente tem todas as limitações de :before (nenhum suporte antigo IE), mas parece funcionar com o IE8, Firefox e Chrome após alguns testes muito limitados. Está funcionando em nosso ambiente de controle, imaginando 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>
44
Marc

Isso foi impossível em 2008, mas está se tornando 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 de lista com o pseudo-elemento ::marker Para aplicar isso à resposta mais votada solução:

<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 de JSFiddle

Note, porém, que a partir de julho de 2016, esta solução é apenas uma parte do Working Draft do W3C e ainda não funciona em nenhum dos principais navegadores.

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

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

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

5
Jonathan Arkell

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

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

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 lista esteja no preto usual (ou o que você quiser). Mas também é verdade que você pode REDEFINAR TAGS e tags internas com CSS. Então, a melhor maneira de fazer isso é usar uma tag SHORTER para a redefinição

Use essa definição de CSS:

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

E esse 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 resultado obrigatório. Além disso, você pode fazer cada cor diferente do disco:

<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>
2
Dragnovich

Embrulhe 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.

0
user4903

Funciona também se definirmos a cor para cada elemento, por exemplo: 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;
}
0
Mohammed

Como por W3C spec

As propriedades da lista ... não permitem que os autores especifiquem um estilo distinto (cores, fontes, alinhamento, etc.) para o marcador de lista ...

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

0
Aeon

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

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
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

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

Se você estiver disposto a usar bibliotecas externas, o Font Awesome fornece ícones vetoriais escalonáveis ​​ , e quando combinado com as classes auxiliares Bootstrap (por exemplo text-success), você pode criar listas muito legais e personalizáveis.

Eu expandi o extrato de a página de exemplos da lista Awesome da fonte abaixo:

Use fa-ul e fa-li para 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) suporta o IE8 , e suporta apenas o IE7 se você usar o versão anterior 3.2.1 .

0
eggy