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.