Sebbene questa dichiarazione CSS3 potrebbe non essere fondamentale per il vostro progetto o disegno e, anche se non è supportato da tutti i browser, si presenta come un effetto fantastico che da al progetto un’ulteriore spinta in avanti.

CSS

⤽
Attualmente FireFox, Safari, Chrome e Opera supporta l’attributo per la sezione di testo, e il browsers che non lo supportano semplicemente ignorano il codice in modo silenzioso, quindi non ha molta importanza.
C’è una demo che si può provare più in basso nella pagina, usando i colori DesignJuices nell’esempio.
Il frammento di base per raggiungere questo obiettivo è il seguente:
Copia codice 

::selection {
  background:#f094b7;
  color:#555;
}
::-moz-selection {
  background:#f094b7;
  color:#555;
}
::-webkit-selection {
  background:#f094b7;
  color:#555;
}
Ora, se siete interessati ad un colore per l’elemento di testo evidenziato il lavoro finisce qui, ma ci possono essere circostanze dov’è necessario disporre di diverse colori per sezioni diverse della pagina.
Possiamo avere più di una istanza di questi selettori utilizzando le classi, ad esempio:
Copia codice 

p.orange::selection {
  background:#c2660d;
  color:#fff;
}
p.orange::-moz-selection {
  background:#c2660d;
  color:#fff;
}
p.orange::-webkit-selection {
  background:#c2660d;
  color:#fff;
}
p.blue::selection {
  background:#2d7e99;
  color:#fff;
}
p.blue::-moz-selection {
  background:#2d7e99;
  color:#fff;
}
p.blue::-webkit-selection {
  background:#2d7e99;
  color:#fff;
}
Demo Live
⤽
Date un’occhiata alla demo (cliccando sul tab Result) per vedere l’effetto in tutta la sua gloria, si prega di notare che dovrete visualizzare la demo utilizzando un browser compatibile di cui sopra.
`