Cómo establecer los colores Bullet en listas UL / LI html mediante CSS sin utilizar imágenes o etiquetas de tramo



Answers

Al navegar hace un tiempo, encontraste este sitio, ¿has probado esta alternativa?

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

Suena difícil, pero puede hacer su propia imagen / patrón png here , luego copiar / pegar su código y personalizar sus viñetas =) ¿Todavía es 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. tomar un código de FontAwesome cheatsheet (o cualquier otro ícono de webfont).
i.e.:
fa-angle-right [&#xf105;]

y use la última parte de f ... seguido 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 también tienes sugerencias de viñetas personalizadas =)

fiddle

Question

Esta pregunta ya tiene una respuesta aquí:

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

Mientras que solo quiero establecer el color de las viñetas cuadradas. ¿Hay una forma elegante de definir el color de las viñetas en CSS ...

... sin usar imágenes de sprites ni etiquetas de división

HTML

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

CSS

li{
   list-style:square;
}



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

Aquí hay un example .

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

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



Esto lo hará ...

li{
  color: #fff;
}



Tomando la demostración de Lea, aquí hay una forma diferente de hacer listas desordenadas, con fronteras: http://jsfiddle.net/vX4K8/7/

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

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

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}



Simplemente resuelvo este problema de esta manera, que debería funcionar en todos los navegadores:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

CSS:

ul li{
    color: red
}

ul li span{
    color: blue;
}



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

El uso de la unidad em permite una 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 puede jugar con la box-shadow para crear sombras agradables, algo que no se verá bien con el content: "• " solución content: "• " .




Estoy agregando mi solución a este problema.

No quiero usar imágenes y el validador lo castigará por usar valores negativos en CSS, así que voy de esta manera:

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

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

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



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

Alternativamente, podría hacer una imagen con el color de viñeta que desee y establecerla con la propiedad de list-style-image .




Links