Come cambiare il colore del testo selezionato

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.

by Sergio Parilli

HTML

<div id="container">





<h2>Selezione di base</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.

</p>



<h2>Selezione Orange</h2>

<p class="orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.

</p>



<h2>Selezione Blue</h2>

<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.

</p>

</div>

CSS

body {

    background: #252525;

}



#container {

    width: 76%;

    margin: 50px auto;

    font: 14px/16px Helvetica,Arial,sans-serif;

    color: #000;    

    background:#fff;

    padding: 30px;

overflow:hidden;

}





p {

    padding:0;

    margin: 0 0 10px 0;

}



p.orange {

    padding:0;

    margin: 0 0 10px 0;

}



p.blue {

    padding:0;

    margin: 0 0 10px 0;

}



h2 {

    padding:0;

    margin: 0 0 10px 0;

    font: 20px Helvetica,Arial,sans-serif;

    color: #000;

}



/* end demo stylesheet */







/* selection */



::selection {

    background:#d3d3d3; 

    color:#555;

}



::-moz-selection {

    background:#d3d3d3; 

    color:#555;

}



::-webkit-selection {

    background:#d3d3d3; 

    color:#555;

}



/* end selection */









/* classed selection */



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;

}