Cambiare il colore di selezione del testo in una pagina web usando lo standard CSS 3

Molto richiesta nel sondaggio la possibilità di cambiare il colore di selezione del testo nel blog, per dare un tocco personale in più al nostro spazio personale. L’operazione è semplicissima, ma comincio subito dai lati negativi: nonostante il codice per farlo è previsto nello standard CSS 3, Internet Explorer non lo supporta (tanto per cambiare), quindi questa modifica sarà apprezzata solamente dagli utenti che usano un browser diverso.

Tuttavia essendo uno standard, è possibile che nelle prossime versioni del browser di Microsoft venga supportata anche questa feature.

Il codice CSS per cambiare il colore della selezione

In un foglio di stile, per cambiare il colore di selezione del testo basta inserire queste righe:

::selection {
    background: #7AFFAF;
    }
::-moz-selection {
    background: #7AFFAF;
}

Sostituendo il codice evidenziato in rosso col valore esadecimale del colore che vogliamo utilizzare, utilizzando la codifica RGB dei colori.

L’istruzione è duplicata perchè la prima (::selection) viene supportata dai browser che utilizzano Webkit (Safari e Chrome, per fare un esempio), mentre la seconda (::-moz-selection) da Firefox.

Cambiamo il colore su Blogger

Nel caso di Blogger, andiamo in Layout->Modifica HTML e incolliamo il codice subito sopra questa riga:

]]></b:skin>

Ecco l’effetto che otterremo:

In questo caso il colore di selezione del testo è diventato verde chiaro. Rimangono comunque delle tracce di azzurro a causa della struttura predefinita dei template di Blogger. Volendo eliminare quest’effetto, si può cercare nel codice del template questa riga (dopo aver selezioniato “Espandi i modelli widget”):

<div style='clear: both;'/> <!-- clear for photos floats –>

e sostituirla con questa:

<!--div style='clear: both;'/--> <!-- clear for photos floats –>

che praticamente la rende inattiva, ottenendo questo risultato:

Quest’ultimo codice che abbiamo modificato serve per evitare che il testo del post si sovrapponga alle immagini in particolari condizioni, quindi se doveste avere effetti collaterali, ripristinate la riga com’era originariamente e fate pace con quel poco di azzurro che purtroppo è rimasto.

La modifica che ho proposto ha effetto su tutto il template del blog, quindi tutte le sue parti evidenziate avranno il nuovo colore:

Un modo in più per personalizzare il proprio blog.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!