La list-stylepropiedad es una propiedad abreviada que establece valores para tres propiedades diferentes relacionadas con la lista en una declaración:
ul ( list-style: || || ; )He aquí un ejemplo de sintaxis:
ul ( list-style: square outside none; )Que sería lo mismo que la siguiente versión de mano:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )En resumen, si se omite algún valor, volverá a su estado inicial.
Valores para list-style-type
La list-style-typepropiedad define el tipo de lista estableciendo el contenido de cada marcador, o viñeta, en la lista. Los valores de palabras clave aceptables para list-style-typeincluyen:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN tiene una lista más completa. Los valores que no son palabras clave se introdujeron en CSS3 y están comenzando a ver cierto soporte, como:
ul ( list-style-type: "→"; )La siguiente demostración incluye un grupo de listas desordenadas para demostrar cada valor de palabra clave:
La list-style-typepropiedad se aplica a todas las listas y a cualquier elemento que se establezca en display: list-item.
El color del marcador de lista será cualquiera que sea el color calculado del elemento (establecido a través de la colorpropiedad).
Valores para list-style-position
La list-style-positionpropiedad define dónde colocar el marcador de lista y acepta uno de dos valores: insideo afuera. Estos se muestran a continuación con lo paddingeliminado de las listas y un borde rojo izquierdo agregado:
Valores para list-style-image
La list-style-imagepropiedad determina si el marcador de lista se establece con una imagen y acepta un valor de "ninguno" o una URL que apunta a la imagen:
ul ( list-style-image: url(images/bullet.png.webp); )Más demostraciones
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos |
IE6 / 7 no admite todos los valores de palabras clave list-style-typey también tiene un error en el que los elementos de la lista flotante no muestran su marcador de lista. Esto se resuelve usando una imagen de fondo (en lugar de list-style-image) en los elementos de la lista.