Change Text Selection Color using CSS

Recently when visiting a website I noticed that when its text was selected it had a theme that fit his website. Normally when text is selected it is a dark blue color. Now if your website doesn’t have any blue in it, would this not look a bit out of place?

When hunting for the solution of how this was done, I was pleasantly surprised how easy it was. Just add the following CSS to your page:

::selection            { background: #A8141B; color: white; /* Safari */ }
::-moz-selection    { background: #A8141B; color: white; /* Firefox */ }

As you can see, this only works in Firefox and Safari at the moment. This may seem like nothing, but it is a subtle effect that can add some visual appeal to your website!

Highlight any text on this page to view the above CSS in action (using Safari / Firefox).

Related posts:

1. CSS Rounded Corners
2. Snazzy CSS Double Border Effect
3. Animate Text with jQuery Easing (screencast)
4. CSS/JavaScript Hover Menu (screencast)
5. Photoshop Slicing & CSS Coding

Written by Brenley Dueck