Text Selection Color

I have so many topics I want to cover, but very little time right now. So here is a short one on how to change the color of your selection text (when you drag your cursor over text to copy, as you would on this website!) Normally this color is a blue, but it can be changed to match your design if you want. This is not a super important detail to any web design, but it adds a nice touch.

::-moz-selection {
   background-color: #317572;
   color: #fff;
}
::selection {
    background-color: #317572;
    color: #fff;
}

Explanation

The background-color property will change your selection color, if you use ::-moz-selection for firefox, or ::selection for other browsers. It is important to also change the color property if your chosen background color won’t contrast enough. I made the color white, to contrast with my dark background color.

The idea for this came from the HTML5 Boilerplate website by Paul Irish, who chose to use a hot pink color for selecting. So if you see a website with hot pink when you drag your mouse across text, it was likely started from that boilerplate.

Browser Support

This works in all the latest versions of every browser. Even in IE9 (yeah!) It does not work in IE8 or earlier, but since this is just a nice extra design detail, and not crucial to making a website work, it is fine to add to any site.

Leave a Reply

Your email address will not be published. Required fields are marked *