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).