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.
Respuestas:
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 */
}
:beforecomo en la respuesta de Marc a continuación.
betiqueta sería más apropiada.
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>
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 */
}
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:
<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)
betiqueta sería más apropiada.
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>
Simplemente haga una viñeta en un programa de gráficos y use list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
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");
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 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!
<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 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-ulyfa-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 .
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;
}
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 .
Solo usa CSS:
<li style='color:#e0e0e0'>something</li>