CSS: Personalizar viñetas en listas desordenadas

Cuando se quiere una viñeta personalizada para listas desordenadas en XHTML no hay más que crear la imagen para la viñeta, y después adaptar la hoja de estilo para hacer la personalización.

Primero hay que definir las reglas para la etiqueta ul:

ul {
padding-left: 0; /*Limpieza de márgenes (se puede cambiar)*/
margin-left: 36px; /*Indentado de la lista (se puede cambiar)*/
list-style-type: none; /*Quitar estilo de viñeta*/
}

Y después las reglas para la etiqueta li:

li {
background: url(imagen.gif) left center no-repeat;
margin-bottom: 10px;
padding-left: 15px;
}

Ver ejemplo de viñetas personalizadas

Si no dispones de una imagen o no se te ocurre como hacerla puedes encontrar un montón de imágenes en Bullet Madness (la imagen utilizadas en el ejemplo procede de ese sitio).

7 respuestas a «CSS: Personalizar viñetas en listas desordenadas»

  1. Hola, me parece genial que puedas modificar la viñeta de una lista desordenada.

    Pero creo que es mucho rollo.

    Yo recomiendo solo poner en una hoja de estilos css, lo siguiente

    li {
    list-style:url(micarpeta/miImagen.gif);
    }

    obviamente «micarpeta/miImagen» depende de tu organización de tu sitio web.

  2. La propiedad list-style y sus variantes son otra alternativa para llegar al objetivo de poner una imagen personalizada a cada elemento de lista.

    Pero con esa propiedad se pierde un poco el control del posicionamiento de la imagen, y de los márgenes y rellenos del elemento de lista UL y LI.

    Pero el utilizar el método expuesto en esta entrada o el que comentaba Roberto Pérez dependerá de la situación ante la que nos encontremos.

  3. muy bueno.
    muchas gracias por la ayuda!!
    Sabia que se podia hacer con css pero no encontraba
    mi apunte de curso

Los comentarios están cerrados.