Overriding The Default Text Selection Color With CSS

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; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Within the selection selector, color and background are the only properties that work. What you can do for some extra flair, is change the selection color for different paragraphs or different sections of the page.

View Demo

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;
}

Note how the selectors are not combined, even though the style block is doing the same thing. It doesn’t work if you combine them:

/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}

That’s because browsers ignore the entire selector if there is a part of it they don’t understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors.

For even more crazy flair, you could reveal an image with text selection.