Quick Tip: Text Selection Color

I saw this feature for the first time in the HTML5 Boilerplate quite a while ago and have been using it in every project ever since.

Changing text selection color with CSS is easy and, in my opinion, it adds a little bit more fun to the web-site. It make users feel surprised in a good way and surprises make their experience with your web-site memorable. There is absolutely no usability issues, unless you are using über-acid selection colors.

Also, you need to remember to always set text-shadow to none, because selected text with shadow will be unreadable. Here is the code you need to add to your CSS file.

::-moz-selection { background: #4DA400; color: #fff; text-shadow: none; }
::selection { background: #4DA400; color: #fff; text-shadow: none; }

It applies to the whole page, but you can easily limit selection color to specific elements by using CSS selectors (e.g. p.article::selection).

You can see how it works right on this page, try selecting some text.