¿Existe una manera sencilla de cambiar el color de una viñeta en una lista?

https://stackoverflow.com/questions/76564

09-06-2019
|

Pregunta

Todo lo que quiero es poder cambiar el color de una viñeta en una lista a gris claro.El valor predeterminado es negro y no sé cómo cambiarlo.

Sé que me vendría bien una imagen;Preferiría no hacer eso si puedo evitarlo.

Solución

La viñeta obtiene su color del texto.Entonces, si desea tener una viñeta de color diferente al texto en su lista, deberá agregar algunas marcas.

Envuelva el texto de la lista en un lapso:

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

Luego modifica ligeramente tus reglas de estilo:

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

Otros consejos

Logré esto sin agregar marcado, sino que usé li:before.Esto obviamente tiene todas las limitaciones de :before (no es compatible con IE antiguo), pero parece funcionar con IE8, Firefox y Chrome después de algunas pruebas muy limitadas.Está funcionando en nuestro entorno de controlador y me pregunto si alguien podría comprobarlo.El estilo de viñeta también está limitado por lo que está en 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>

Esto era imposible en 2008, ¡pero pronto será posible (con suerte)!

De acuerdo a La especificación CSS3 del W3C, puede tener control total sobre cualquier número, glifo u otro símbolo generado antes de un elemento de la lista con el ::marker pseudoelemento.Para aplicar esto a la solución de la respuesta más 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 */
}

Ejemplo de JSFiddle

Tenga en cuenta, sin embargo, que a julio de 2016, esta solución es sólo una parte del borrador de trabajo del W3C y aún no funciona en ninguno de los principales navegadores.

Si desea esta función, haga lo siguiente:

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

El gran problema con este método es el margen de beneficio adicional.(la etiqueta de intervalo)

Hola tal vez esta respuesta llegue tarde pero es la correcta para lograrlo.

Ok, el hecho es que debes especificar una etiqueta interna para que el texto de la LISTA esté en el color negro habitual (o lo que quieras).Pero también es cierto que puedes REDEFINIR cualquier ETIQUETA y etiquetas internas con CSS.Entonces, la mejor manera de hacer esto es usar una etiqueta MÁS CORTA para la redefinición.

Utilice esta definición CSS:

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

Y este código html:

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

Obtienes el resultado requerido.También puedes hacer cada disco de un color 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>

Simplemente haga una viñeta en un programa de gráficos y use list-style-image:

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

Envuelva el texto dentro del elemento de la lista con un intervalo (o algún otro elemento) y aplique el color de la viñeta al elemento de la lista y el color del texto al intervalo.

según especificación W3C,

Las propiedades de la lista...no permita que los autores especifiquen estilos distintos (colores, fuentes, alineación, etc.) para el marcador de lista...

¡Pero la idea con un intervalo dentro de la lista anterior debería funcionar bien!

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

Puede usar Jquery si tiene muchas páginas y no necesita editar el marcado usted mismo.

aquí hay un ejemplo simple:

$("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 una pregunta de 2008, pensé que podría agregar una respuesta más reciente y actualizada sobre cómo se puede cambiar el color de las viñetas en una lista.

Si está dispuesto a utilizar bibliotecas externas, Font Awesome te ofrece iconos vectoriales escalables, y cuando se combina con Clases de ayuda de Bootstrap (p.ej. text-success), puedes crear algunas listas muy interesantes y personalizables.

He ampliado el extracto de la página de ejemplos de lista de Font Awesome abajo:

Usar fa-ul y fa-li para reemplazar fácilmente las viñetas predeterminadas en listas desordenadas.

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

Fuente impresionante (en su mayoría) es compatible con IE8, y sólo es compatible con IE7 si utiliza el versión anterior 3.2.1.

Funciona también si configuramos el color para cada elemento, por ejemplo:Agregué algo de margen a la izquierda ahora.

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

Podrías usar CSS para lograr esto.Al especificar la lista en el color y estilo de su elección, también puede especificar el texto en un color diferente.

Siga el ejemplo en http://www.echoecho.com/csslists.htm.

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

Uno

Dos

Tres

Sólo usa CSS:

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

Querrás establecer un "estilo de lista" mediante CSS y darle un color:valor.Ejemplo:

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow