66 Posts  •  February 22, 2011

Just the Tip #4: CSS3 Text Selection Highlight Colour

This is a great little CSS3 selector you can start using on your website or blog right away. It is not complicated at all and will show that you took the time and care to go just a bit further than the blog next door. It might not be something everyone notices, but if they do it draws them into the experience and style of your site that much more. It’s this next level of craftsmanship and care that will set you apart from the pack.

  

[css]

::-moz-selection {
background: #FFCC00;
color: #000000;
}/* Firefox – Keep separate from "::selection" */

::selection {
background: #FFCC00;
color: #000000;
}

[/css]

Of course like any CSS3 code we use right now there is limited cross-browser support. I tested it in these browsers (Firefox, Chrome, Safari, and IE9) and it seems to be working. If you are using one of these browsers you can highlight any text on my site to see the effect.

Author: Colin Oakes

Hello, I’m Colin Oakes, a web designer and front-end developer from Guelph, Ontario. I have been designing and creating websites for over 10 years and have enjoyed every minute of it.