A cool CSS effect : Set different color when user select text in web pages

Difficulty Level: Beginner

You all might be knowing this. When we select some text the default background color is Blue. But we can override font and background color on selection.

CSS property :
A generic setting for all the text present.

/*Firefox */
::-moz-selection{
        background:#CCE6FF ;
        color:#000;
}

/*Safari*/
::selection {
        background:#cc0000;
        color:#fff;
}

If you want to add unique colors to different sections. Put different paragraphs with their class defined like following.

<p class="orange" >

        -- CONTENT --
</p>
<p class="red" >

        -- CONTENT --        
</p>

and so on…

Then add property as:

/* Specific to paragraph*/
p.orange::-moz-selection{
        background:#FFF2A8 ;
        color:#000;
}

p.red::-moz-selection{
        background:#cc0000;
        color:#fff;
}

Try out the following :

Copy and paste following content to your page and css file.

<code>Lorem ipsum </code> dolor sit amet, consectetur adipiscing elit.
Donec dictum dapibus orci, pellentesque accumsan justo pulvinar ac.
Donec gravida pharetra erat, eget blandit est egestas in.
Thanks from<code> MindFire Solution </code>

CSS :

/*Firefox */
::-moz-selection{
        background:#CCE6FF ;
        color:#000;
}
/*Safari*/
::selection {
        background:#cc0000;
        color:#fff;
}
/*Style for text present inside <code> tag*/
code::-moz-selection{
        background:#1D78B5 none repeat scroll 0 0;
        color:#FFFFFF;
}
code
{
        background-color:#F1F3F9;
        font-size:1.5em;
}

Now select the text with mouse in browser to see the effect.

Note : Not supported by IE.