Come cambiare il colore della selezione del testo utilizzando il CSS3

Spesso in un sito web sono i dettagli a far la differenza. E cambiare il colore di sfondo delle selezione di un testo è un dettaglio di questi.
Provate a selezionare una parte qualsiasi di questo post. Vedrete come, al posto del solito azzurro scuro su testo bianco, la selezione apparirà arancione su testo nero.
State utilizzando Explorer? Male, voi non avrete notato nessun cambio. Almeno fino alla prossima versione dell’infelice Browser.

Come cambiare il colore della selezione del testo utilizzando lo standard CSS3. Aprite il vostro bel foglio di stile ed inserite queste due semplicissime righe, salvate ed aggiornate la vostra pagina:

::selection {color:#000000; background:#ffa400;}
::-moz-selection {color:#000000; background:#ffa400;}

Ovviamente dovrete modificare il testo in azzurro, inserendo il codice RGB relativo al colore desiderato. Color: si riferisce al colore del testo, background: modifica il colore dello sfondo della selezione.

Ulteriore personalizzazione: il selettore “selection” prevede un ventaglio di personalizzazione non troppo esteso, sono 4 le proprietà applicabili:  color, background, cursor, and outline.

Problemi di compatibilità. Come già accennato, almeno per ora non è possibile modificare il colore di sfondo di una selezione su browser Explorer. Il comando è inoltre ripetuto due volte, la seconda con l’aggiunta di -moz-, per renderlo compatibile con la maggior parte dei browser, compreso Mozilla Firefox.

Newsletter, una mail ogni tanto, giuro.

Vuoi ricevere aggiornamenti come "Come cambiare il colore della selezione del testo utilizzando il CSS3" direttamente nella tua casella email? Iscriviti alla mia newsletter!

Commenta questo post

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *