:: selezione - Trucchi CSS | CSS Almanac 2025

Usando il cursore seleziona questa frase. Notate come mentre selezionate il testo un colore di sfondo riempie lo spazio? È possibile modificare il colore di sfondo e il colore del testo selezionato in base allo stile ::selection. Lo stile di questo pseudo elemento è ottimo per abbinare il testo selezionato dall'utente alla combinazione di colori dei tuoi siti.

p::-moz-selection ( color: red) p::selection ( color: red; )

Tieni presente che i doppi due punti sono necessari nella sintassi di questo pseudo elemento, nonostante gli altri pseudo elementi accettino un singolo due punti.

Come visto sopra, puoi modellare i ::selectionsingoli elementi. Puoi anche applicare uno stile all'intera pagina trascinando lo pseudo elemento nudo nel tuo foglio di stile.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Ci sono solo tre proprietà che ::selectionfunzionano con:

color
background( background-color, background-image)
text-shadow

Vedi i test Pen :: selection di Chris Coyier (@chriscoyier) su CodePen.

Se provi a creare ::selectionuno stile con una proprietà che non è nell'elenco, quella proprietà verrà ignorata. Potrebbe essere complicato vedere backgroundin quell'elenco perché la proprietà renderà un colore solo quando viene utilizzata ::selectione non renderà un'immagine di sfondo o una sfumatura.

Inoltre, non provare questo:

p::-moz-selection, p::selection ( color: red; )

Quando i browser trovano una parte di una selezione che non comprendono, rilasciano l'intera cosa, quindi questo fallirà tutto il tempo.

Uno degli usi più utili per ::selectionè disattivare un text-shadowdurante la selezione. A text-shadowpuò entrare in conflitto con il colore di sfondo della selezione e rendere il testo difficile da leggere. Impostare text-shadow: none;per rendere il testo chiaro e facile da leggere durante la selezione.

Vedere l'ombra del testo Pen :: selection di Chris Coyier (@chriscoyier) su CodePen.

Fantasia :: selezione

Accoppiato con Sass, o qualsiasi altro preprocessore, puoi creare effetti davvero fantastici con ::selection. Seleziona il testo nella demo qui sotto:

Potresti notare che l'effetto non è così fluido in alcuni browser. Archiviamo quella demo sotto: cose che sono possibili, ma probabilmente solo per divertimento.

Un altro piccolo trucco stupido ma divertente è rivelare un'immagine attraverso il testo selezionato.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.