Selezionare un testo con colore diverso da quello di default

Il selettore selection corrisponde alla porzione di un elemento che un utente ha selezionato.

Pubblicato da ,
Ultima modifica

Con i Css è possibile far evidenziare un testo di colore diverso da quello di default del browser (il colore di default è sfondo blu e colore del testo bianco) grazie al metodo :selection.

Considerando di avere questo codice html:

Codice HTML

 <div class="box"> 
<p>Lorem ipsum dolor sit amet....</p> 
</div>

e vogliamo far colorare ad esempio di rosso il testo con sfondo bianco quando lo si seleziona, il codice css è questo:

Codice CSS

 /*Webkit opera, IE9, chrome*/ 
p::selection
{ 
color: red; background: white;  
} 

/*Firefox*/ 
p::-moz-selection
{
color: red; 
background: white; 
} 

#box{ 
margin: auto; 
width: 500px; 
height: auto; 
border: 1px solid #000; 
padding: 20px; 
text-align: justify; 
font-family: cursive; 
} 

 

Demo