css3 Cómo configurar los colores de viñeta en las listas html UL / LI a través de CSS sin usar ninguna imagen o etiquetas de rango





8 Answers

Navegando hace algún tiempo, encontré este sitio, ¿has probado esta alternativa?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

suena difícil, pero puedes hacer tu propia imagen / patrón png here , luego copiar / pegar tu código y personalizar tus viñetas =) ¿sigue siendo elegante?

EDITAR:

siguiendo la idea de @ lea-verou en la otra respuesta y aplicando esta filosofía de mejora de fuentes externas, he llegado a esta otra solución:

  1. incruste en su cabeza la hoja de estilo de la biblioteca de iconos de Webfont, en este caso, Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  1. tome un código de la hoja de trucos de cheatsheet (o cualquier otro icono de fuente web).
i.e.:
fa-angle-right [&#xf105;]

y use la última parte de f ... seguida de un número como este, con la font-family también:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

¡y eso es! Ahora tienes también consejos de bala personalizados =)

fiddle

css css3 layout colors html-lists

Esta pregunta ya tiene una respuesta aquí:

Imagine una lista simple sin clasificar con algunos elementos <li> . Ahora, he definido las balas para que tengan forma cuadrada a través de list-style:square; Sin embargo, si configuro el color de los elementos <li> con color: #F00; entonces todo se vuelve rojo!

Si bien solo quiero configurar el color de las balas cuadradas. ¿Hay una manera elegante de definir el color de las viñetas en CSS ...

... sin usar ningún sprite de imágenes ni etiquetas de rango!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}



La especificación actual del módulo CSS 3 Lists sí especifica el pseudo-elemento ::marker que haría exactamente lo que quieres; FF ha sido probado para no admitir ::marker y dudo que Safari u Opera lo tengan. IE, por supuesto, no lo soporta.

Así que ahora mismo, la única forma de hacer esto es usar una imagen con una imagen list-style-image .

Supongo que podrías envolver el contenido de un li con un span y luego podrías establecer el color de cada uno, pero eso me parece un poco extraño.




Sin embargo, otra solución es usar un :before pseudo elemento con un border-radius: 50% . Esto funcionará en todos los navegadores, incluidos IE 8 y superiores.

El uso de la unidad em permite la capacidad de respuesta a los cambios de tamaño de fuente. Puede probar esto, cambiando el tamaño de su ventana jsFiddle.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

Incluso puedes jugar con la box-shadow para crear algunas sombras agradables, algo que no se verá bien con el content: "• " solución content: "• " .




Intenté esto y las cosas se pusieron raras para mí. (css dejó de funcionar después de la parte :after {content: "";} de este tutorial. Descubrí que puede colorear las viñetas con solo usar color:#ddd; en el elemento li .

Aquí hay un example .

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}



Lo más fácil que puedes hacer es envolver el contenido de <li> en un <span> o equivalente, luego puedes establecer el color de forma independiente.

Alternativamente, puede crear una imagen con el color de viñeta que desee y establecerla con la propiedad list-style-image .




Estoy agregando mi solución a este problema.

No quiero usar image y el validador te castigará por usar valores negativos en CSS, así que voy por este camino:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }



La solución de Lea Verous es buena, pero quería más control sobre la posición de las balas, así que este es mi enfoque:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}



Esto lo hará ..

li{
  color: #fff;
}





Related