Overriding The Default Text Selection Color With CSS3

Finally getting round to testing out some CCS3 techniques I’ve been reading about and drooling over for the past year.  Noticed a site I swung by thats text selection color wasn’t the browser default so I looked it up and found out how to change the background and font colors. It’s nothing new, people have been doing it for a while, just this is the first chance I’ve had to start playing:

::selection {/* Safari */
	background: #FF5200;
	color: #FFFFF3;
	}
::-moz-selection {/* Firefox */
	background: #FF5200;
	color: #FFFFF3;
}

Guess each browser needs it’s own declaration which is kind of annoying, oh well. And I imagine it only works in Safari and Firefox. You can check it working by selecting some text on this page if you are using one of those browsers, otherwise there’s an example below. Don’t mind the colors, I didn’t think much about it, just wanted to make sure it worked.

As it’s a selector class you can apply different overrides to different elements within the page, so something like the following should work (haven’t tested):

p.sidebar::selection {/* Safari */
	background:#2E2E2E;
	color:#FFFFF3;
	}
p.sidebar::-moz-selection {/* Firefox */
	background:#2E2E2E;
	color:#FFFFF3;
}

Anyways this is just a taste of CSS3, it has some really amazing features and I need to jump in and play around soon!