CSS list-style-image
La proprietà CSS list-style-image consente di usare immagini come marcatori (CSS3)
La proprietà list-style-image di CSS3 permette di usare una immagine come marcatore per le liste HTML. Questo consente una personalizzazione visiva degli elenchi, migliorandone l’aspetto grafico o rendendolo coerente con il design del sito. Se l'immagine non è disponibile, è possibile usare un valore di fallback con list-style-type.
Sintassi
Significato dei valori principali:
-
url("percorso"): Specifica il percorso dell'immagine da usare come marcatore, ad esempio
url('x_image.png'). -
none: Disattiva l’uso di un’immagine come marcatore, utilizzando invece il valore di
list-style-type. -
inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.
Esempio proprietà: list-style-image
Codice Esempio: list-style-image
.list-image {
list-style-image: url('x_image.png');
font-size: 18px;
}.list-image-fallback {
list-style-type: square;
list-style-image: none;
font-size: 18px;
}
Contenuto Esempio: list-style-image
Esempio di utilizzo della proprietà list-style-image
In questo esempio si usa un'immagine personalizzata per i marcatori della lista:
- Elemento con immagine come marcatore
- Secondo elemento della lista
- Elemento con marcatore di tipo square
- Secondo elemento
CSS e HTML per l'esempio con list-style-image:
<style>
.list-image {
list-style-image: url('x_image.png'); /* Icona check */
font-size: 18px;
}
.list-image-fallback {
list-style-type: square;
list-style-image: none;
font-size: 18px;
}
</style>
<ul class="list-image">
<li>Elemento con immagine come marcatore</li>
<li>Secondo elemento della lista</li>
</ul>
<ul class="list-image-fallback">
<li>Elemento con marcatore di tipo square</li>
<li>Secondo elemento</li>
</ul>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
