html - puntos - lista multinivel word

¿Hay alguna manera fácil de cambiar el color de una viñeta en una lista? (16)

Todo lo que quiero es poder cambiar el color de una viñeta en una lista a un gris claro. Por defecto está en negro, y no puedo encontrar la manera de cambiarlo.

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

Envuelva el texto dentro del elemento de la lista con un lapso (u otro elemento) y aplique el color de la viñeta al elemento de la lista y el color del texto al tramo.

Esto fue imposible en 2008, pero se está haciendo posible pronto (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 la lista con el ::marker pseudo-elemento ::marker . Para aplicar esto a la solución de 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 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 aún no funciona en los principales navegadores.

Si quieres esta característica, haz lo siguiente:

Funciona también si establecemos el color para cada elemento, por ejemplo: agregué un margen a la izquierda ahora.

<article class="event-item"> Black text here </article> .event-item{ list-style-type: disc; display: list-item; color: #ff6f9a; margin-left: 25px; } .event-item p { margin: 0; color: initial; }

Hola, quizás esta respuesta sea tardía pero es la correcta para lograr esto.

De acuerdo, el hecho es que debes especificar una etiqueta interna para que el texto de LIst esté en el negro habitual (o lo que quieras para obtenerlo). Pero también es cierto que puede REDEFINIR cualquier ETIQUETA y etiquetas internas con CSS. Entonces, la mejor manera de hacerlo es utilizar una etiqueta SHORTER para la redefinición

Use 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>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul>

Obtienes el resultado requerido. También puedes hacer que cada disco tenga un color diferente:

<ul> <li class="c1">Text 1</li> <li class="c2">Text 2</li> <li class="c3">Text 3</li> </ul>

La viñeta obtiene su color del texto. Por lo tanto, si desea tener una viñeta de color diferente al texto en su lista, deberá agregar un margen de beneficio.

Ajustar el texto de la lista en un lapso:

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

Luego modifique sus reglas de estilo levemente:

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

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

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 de ayuda de Bootstrap (por ejemplo, text-success ), puede crear listas bastante geniales y personalizables.

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

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

Font Awesome (principalmente) es compatible con IE8 , y solo es compatible con IE7 si utiliza la versión anterior 3.2.1 .

Podría 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 .

Puede usar Jquery si tiene muchas páginas y no necesita ir y 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 });

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

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

Según 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 lapso dentro de la lista anterior debería funcionar bien!

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

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

Solo usa CSS:

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

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

Uno

Dos

Tres

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

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

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