Use CSS to Override Default Text Selection Color

[img_assist|nid=654|title=|desc=|link=none|align=middle|width=500|height=146]
One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not a big deal.

Here is the rub:

::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

Within the selection selector, background is the only property that works. What you CAN do for some extra flair, is change the selection color for different paragraphs or different sections of the page.

[VIEW EXAMPLE]

All I did was use different selection color for paragraphs with different classes:

p.red::selection {
	background: #ffb7b7;
}
p.red::-moz-selection {
	background: #ffb7b7;
}
p.blue::selection {
	background: #a8d1ff;
}
p.blue::-moz-selection {
	background: #a8d1ff;
}
p.yellow::selection {
	background: #fff2a8;
}
p.yellow::-moz-selection {
	background: #fff2a8;
}

Original post here.