Alterar a cor de um marcador em uma lista html?

Question 1

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.

Question 2

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 */
}

Question 3

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>

Question 4

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:

Question 5

<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)

Question 6

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>

Question 7

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

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

Question 8

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.

Question 9

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!

Question 10

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

Question 11

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
});

Question 12

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>

Expandir snippet

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

Question 13

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;
}

Question 14

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 .

Question 15

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

1

Dois

Três

Question 16

Basta usar CSS:

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

Question 17

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

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

Answer 1

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.

html css html-lists 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.

Answer 2

Eu mesmo escolheria uma imagem e evitaria a marcação extra. É provavelmente a solução mais eficiente

Sam Murray-Sutton

Answer 3

8

Quem se importa com marcação "extra" como essa ... sério, você não perde nada fazendo isso.

Answer 4

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

Answer 5

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,

Answer 6

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

Answer 7

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

Answer 8

Já que você está apenas mudando a apresentação do texto, uma btag seria mais apropriada.

Supuhstar

Answer 9

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>

Answer 10

Esta é a maneira mais moderna com CSS3, em comparação com a resposta aceita

minni

Answer 11

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:

Answer 12

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

Answer 13

Já que você está apenas mudando a apresentação do texto, uma btag seria mais apropriada.

Supuhstar

Answer 14

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

Answer 15

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>

Answer 16

você deve usar . além disso, está obsoleto.

the_drow

Answer 17

2

O contador de pontos para @the_drow, não está obsoleto. stackoverflow.com/questions/1348683/…

Strixy

Answer 18

Definir uma cor padrão aplicada a um seletor específico corrigiu meu problema. Obrigado por esta dica.

David,

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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.

Answer 23

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!

Answer 24

0

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

fonte

Answer 25

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
});

Answer 26

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>

Expandir snippet

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

Answer 27

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;
}

Answer 28

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 .

Answer 29

-1

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

1

Dois

Três

NerdFury
fonte

Answer 30

-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

Answer 31

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

Answer 32

-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

Alterar a cor de um marcador em uma lista html?

Respostas: