web-development-kb-es.site

¿Hay una manera fácil de cambiar el color de una bala en una lista?

Todo lo que quiero es poder cambiar el color de una bala en una lista a un gris claro. El valor predeterminado es negro, y no puedo averiguar cómo cambiarlo.

Sé que podría usar una imagen; Preferiría no hacerlo si puedo evitarlo.

htmlcsshtml-lists
83
Dave Haynes

La bala obtiene su color del texto. Por lo tanto, si desea tener una viñeta de color diferente al texto en su lista, tendrá que agregar alguna marca.

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

Logré esto sin agregar marcas, pero en lugar de usar li: antes. Obviamente, esto tiene todas las limitaciones de :before (no es compatible con IE), 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 bala 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>
44
Marc

Esto fue imposible en 2008, ¡pero se está volviendo 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 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 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 aún no funciona en los principales navegadores.

Si quieres esta característica, haz lo siguiente:

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

5
Jonathan Arkell

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

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

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

Ok, el hecho es que debes especificar una etiqueta interna para que el texto final esté en el negro habitual (o lo que sea que quieras obtener). Pero también es cierto que puede REDEFINIR cualquier TAGS y etiquetas internas con CSS. Así que la mejor manera de hacer esto es usar una etiqueta SHORTER 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 puedes hacer cada disco de diferente color:

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

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

0
user4903

Funciona también si configuramos el color de 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;
}
0
Mohammed

Según especificación W3C ,

Las propiedades de la lista ... no permiten que los autores especifiquen un estilo distinto (colores, fuentes, alineación, etc.) para el marcador de la lista ...

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

0
Aeon

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
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

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 usar bibliotecas externas, Font Awesome le ofrece íconos vectoriales escalables , y cuando se combina con Clases de ayuda de Bootstrap (por ejemplo, text-success), puede hacer algunas listas bastante interesantes y personalizables.

He expandido el extracto de la página de ejemplos de la lista de fuentes impresionantes a continuación:

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

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

0
eggy