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

Question 1

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.

Question 2

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

Question 3

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>

Question 4

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:

Question 5

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

Question 6

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>

Question 7

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

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

Question 8

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.

Question 9

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!

Question 10

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

Question 11

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

Question 12

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>

Expandir fragmento

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 .

Question 13

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

Question 14

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 .

Question 15

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

Uno

Dos

Tres

Question 16

Solo usa CSS:

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

Question 17

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

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

Answer 1

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.

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

Answer 2

Yo mismo usaría una imagen y evitaría el marcado adicional. Probablemente sea la solución más eficiente

Sam Murray-Sutton

Answer 3

8

A quién le importa el marcado "extra" como este ... en serio, no pierde nada al hacerlo.

Answer 4

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

Answer 5

¡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

Answer 6

Esta no es la mejor forma de hacer esto. Por ejemplo, esto no funcionará cuando tenga un cms con un editor WYSIWYG. Los elementos 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

Answer 7

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

Answer 8

Dado que solo está cambiando la presentación del texto, una betiqueta sería más apropiada.

Supuhstar

Answer 9

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>

Answer 10

Esta es la forma más sencilla con CSS3, en comparación con la respuesta aceptada

minni

Answer 11

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:

Answer 12

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

Answer 13

Dado que solo está cambiando la presentación del texto, una betiqueta sería más apropiada.

Supuhstar

Answer 14

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

Answer 15

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>

Answer 16

deberías usar . también, está obsoleto.

the_drow

Answer 17

2

Contrapunto a @the_drow, no está obsoleto. stackoverflow.com/questions/1348683/…

Strixy

Answer 18

Establecer un color predeterminado que se aplica a un selector específico solucionó mi problema. Gracias por este consejo.

David

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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.

Answer 23

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!

Answer 24

0

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

fuente

Answer 25

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

Answer 26

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>

Expandir fragmento

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 .

Answer 27

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

Answer 28

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 .

Answer 29

-1

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

Uno

Dos

Tres

NerdFury
fuente

Answer 30

-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

Answer 31

Sí, eso es lo que pensé también ... pero el estilo de li color cambia el color del texto y la viñeta.

Aeon

Answer 32

-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

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

Respuestas: