Chris has posted 24 posts at DZone. You can read more from them at their website. View Full User Profile

Use CSS to Override Default Text Selection Color

02.01.2008
| 26967 views |
  • submit to reddit

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not a big deal.

Here is the rub:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}


Within the selection selector, background is the only property that works. What you CAN do for some extra flair, is change the selection color for different paragraphs or different sections of the page.

[VIEW EXAMPLE]

All I did was use different selection color for paragraphs with different classes:

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}


Original post here.
Published at DZone with permission of its author, Chris Coyier.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Eric Wendelin replied on Sun, 2008/02/03 - 1:16pm

If nothing else it just looks really refreshingly cool. Great find, Chris. Eric Wendelin http://eriwen.com

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.