css - tipos - viñetas letras html

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

Question

Esta pregunta ya tiene una respuesta aquí:

• Cambie el color de las viñetas de una lista HTML sin usar las respuestas de span 10

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;
}

Answer 1

Esto lo hará ..

li{
  color: #fff;
}

Answer 2

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; }

Answer 3

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;
}

Answer 4

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.

Answer 5

La forma más común de hacer esto es algo como esto:

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

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Funcionará en todos los navegadores, incluido IE desde la versión 8 en adelante.

Answer 6

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;
}

Answer 7

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 .

Answer 8

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

2. tome un código de la hoja de trucos de cheatsheet (o cualquier otro icono de fuente web).

i.e.:
fa-angle-right []

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

Answer 9

Recomendaría darle al LI una background-image padding-left . El atributo list-style-image es clave en entornos de navegador cruzado, y agregar un elemento extra, como un tramo, es innecesario. Entonces tu código terminaría buscando algo como esto:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

Answer 10

Sé que es una respuesta tardía para esta publicación, pero para referencia ...

CSS

ul {
    color: red;
}

li {
    color: black;
}

El color de la bala se define en la etiqueta ul y luego cambiamos el color li de nuevo.

Answer 11

Simplemente resuelvo este problema como este, 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;
}

Answer 12

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: "• " .

Answer 13

Tomando la demostración de Lea, aquí hay una forma diferente de hacer listas desordenadas, con bordes: 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;
}

Answer 14

Una forma de hacerlo es usar li:before con content: "" y diseñarlo como elemento de inline-block .

Aquí hay un fragmento de código de trabajo:

ul {
  list-style-type: none; /* no default bullets */
}

li { 
  font-family: Arial;
  font-size: 18px;
}

li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}

<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>

Answer 15

Una variación de la solución de con sangría perfecta en las entradas de varias líneas podría ser algo como esto:

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

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}

Answer 16

Yo uso jQuery para esto:

jQuery(''li'').wrapInner(''<span class="li_content" />'');

& con algo de CSS:

li { color: red; }
li span.li_content { color: black; }

quizás exagerar, pero útil si está programando un CMS y no quiere pedir a sus editores que incluyan un intervalo adicional en cada elemento de la lista.