You are currently viewing Change Text Selection Color With CSS

Change 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.

You can use with each html tags like this;


p.redish::selection {
background: #ffb7b7;
}
p.redish::-moz-selection {
background: #ffb7b7;
}
p.blueish::selection {
background: #a8d1ff;
}
p.blueish::-moz-selection {
background: #a8d1ff;
}

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.blueish::selection, p.blueish::-moz-selection { background: #a8d1ff; }

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.