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

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.

        -- CONTENT --




        -- CONTENT --        

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.

Lorem ipsum  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 MindFire Solution 

CSS :

/*Firefox */
::-moz-selection{
        background:#CCE6FF ;
        color:#000;
}
/*Safari*/
::selection {
        background:#cc0000;
        color:#fff;
}
/*Style for text present inside  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.