¿Cambiar el color de una viñeta en una lista html?

86

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

Sé que podría usar una imagen; Prefiero no hacer eso si puedo evitarlo.

Dave Haynes
fuente
Yo mismo usaría una imagen y evitaría el marcado adicional. Probablemente sea la solución más eficiente
Sam Murray-Sutton
8
A quién le importa el marcado "extra" como este ... en serio, no pierde nada al hacerlo.

Respuestas:

159

La viñeta obtiene su color del texto. Entonces, si desea tener una viñeta de color diferente al texto en su lista, tendrá que 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 modifique ligeramente sus reglas de estilo:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
Prestaul
fuente
¡Exactamente lo que necesitaba! Tengo una lista de enlaces y los enlaces ya tienen un estilo de color diferente aplicado de todos modos.
Dave Haynes
Esta no es la mejor forma de hacer esto. Por ejemplo, esto no funcionará cuando tenga un cms con un editor WYSIWYG. Los elementos <span> no se procesarán. Lo que puede querer es trabajar con: antes y después y dejar de lado los bullits en sí. En realidad, esta es una práctica muy mala.
Automagisch
2
@KoenHoutman, en el momento en que se escribió esto (2008) era la única técnica con un apoyo razonable. Incluso hoy en día no es una mala práctica y sigue siendo la técnica con el mayor soporte de navegadores, aunque estoy de acuerdo en que hoy (en la mayoría de los casos) optaría por usar :beforecomo en la respuesta de Marc a continuación.
Prestaul
Dado que solo está cambiando la presentación del texto, una betiqueta sería más apropiada.
Supuhstar
45

Logré esto sin agregar marcado, sino usando li: before. Obviamente, esto tiene todas las limitaciones de :before(sin soporte antiguo de IE), pero parece funcionar con IE8, Firefox y Chrome después de algunas pruebas muy limitadas. Está funcionando en nuestro entorno de controlador, y se pregunta si alguien podría verificar esto. 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>
Bagazo
fuente
Esta es la forma más sencilla con CSS3, en comparación con la respuesta aceptada
minni
17

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

De acuerdo con la especificación W3C CSS3 , puede tener control total sobre cualquier número, glifo u otro símbolo generado antes de un elemento de lista con el ::markerpseudoelemento. 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

Sin embargo, tenga en cuenta que, a partir de julio de 2016 , esta solución es solo una parte del Borrador de trabajo del W3C y todavía no funciona en los principales navegadores.

Si desea esta función, haga lo siguiente:

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

el gran problema con este método es el marcado adicional. (la etiqueta span)

Jonathan Arkell
fuente
Dado que solo está cambiando la presentación del texto, una betiqueta sería más apropiada.
Supuhstar
1
Cuando se escribió esto, la etiqueta b estaba en medio de ser obsoleta a favor de la etiqueta fuerte. Pero sí, tienes razón, ahora la etiqueta ab sería más apropiada.
Jonathan Arkell
3

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

Ok, el hecho es que debe especificar una etiqueta interna para que el texto LIst esté en el negro habitual (o lo que quiera obtener). Pero también es cierto que puedes REDEFINIR cualquier TAGS y etiquetas internas con CSS. Entonces, la mejor manera de hacer esto usa una etiqueta MÁS CORTA para la redefinición

Utilice esta definición de 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 puede hacer que cada disco tenga 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>

fuente
deberías usar <span>. también, <b> está obsoleto.
the_drow
2
Contrapunto a @the_drow, <b> no está obsoleto. stackoverflow.com/questions/1348683/…
Strixy
Establecer un color predeterminado que se aplica a un selector específico solucionó mi problema. Gracias por este consejo.
David
2

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

ul {
  list-style-image:url('gray-bullet.gif');
}
ghr
fuente
1
El OP explícitamente no quería usar una imagen, pero me encontré con esto buscando una forma general de reemplazar la viñeta. Así que creo que esta respuesta es buena para completar.
Zane
Aquí hay uno con un círculo SVG, que se puede colorear fácilmente: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

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.


fuente
0

Según la especificación W3C ,

Las propiedades de la lista ... no permiten a los autores especificar un estilo distinto (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!

Eón
fuente
0
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

fuente
0

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

Para una pregunta de 2008, pensé que podría agregar una respuesta más reciente y actualizada sobre cómo podría cambiar el color de las viñetas en una lista.

Si está dispuesto a utilizar bibliotecas externas, Font Awesome le ofrece iconos vectoriales escalables , y cuando se combina con las clases auxiliares de Bootstrap (por ejemplo text-success), puede hacer algunas listas geniales y personalizables.

He ampliado el extracto de la página de ejemplos de la lista Font Awesome a continuación:

Utilice fa-uly fa-lipara 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>

Font Awesome (en su mayoría) es compatible con IE8 , y solo es compatible con IE7 si usa la versión anterior 3.2.1 .

huevo
fuente
0

También funciona si establecemos el color para cada elemento, por ejemplo: agregué un 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;
}
Mahoma
fuente
-1

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

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


fuente
-1
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • Uno
  • Dos
  • Tres
  • NerdFury
    fuente
    -2

    Solo usa CSS:

    <li style='color:#e0e0e0'>something</li>
    
    Diodeus - James MacFarlane
    fuente
    Sí, eso es lo que pensé también ... pero el estilo de li color cambia el color del texto y la viñeta.
    Aeon
    -5

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

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