HTML & CSS: Text Selection Colour

Text selection colour is a great new thing in CSS3; at the time of me writing this it's only supported in Firefox, Safari, and Chrome; in slightly different ways.
Here is the simple code for changing the text selection colour:

::selection {
	background: #ffcc00;
	}
::-moz-selection {
	background: #ffcc00;
}

In this case we are specifying the colour "#FFCC00" (you'd usually use more subtle colours however this colour is simply for the example). Please note that the one with the "-moz-" prefix is for older versions of Firefox, and the other one is for other modern browsers (Chrome and Safari).

If you are viewing this in a browser that supports CSS3 then you will see that the text selection colour is bright gold colour (the default is usually a dark blue). Note that because of the way I've badly "stuck-on" the text selection colour to this tutorial that it won't work perfectly, it should work a lot better in your personal usage.

Although the text selection colour isn't going to be viewed in all browsers, it's a nice touch for people that have the modern browsers.
You can also have different selection colours for different paragraphs if you wanted:

p.red::selection {
	background: #FF0000;
}
p.red::-moz-selection {
	background: #FF0000;
}
p.green::selection {
	background: #00FF00;
}
p.green::-moz-selection {
	background: #00FF00;
}
p.blue::selection {
	background: #0000FF;
}
p.blue::-moz-selection {
	background: #0000FF;
}

Once again - you would usually want lighter shades for the selection colours, but this is just to demonstrate the concept.
Also remember that you would need to set the paragraph classes in the HTML:

<p class="green">I'm green when you select me</p>

Back to HTML & CSS