Michael Gearon

::selection – Change text selection color

Michael Gearon

The CSS pseudo-element ::selection changes the styling that is highlighted by the user, such as when you highlight text using a mouse or another pointing device. There is a limited amount of properties that can be used with this pseudo-element which are:

It’s also worth noting that instead of using background-color you can use the background property but if you try and use a background image it will not work and be ignored.

Example

In the below example we’re saying that if the user highlights something then it should be a purple background and the text should be orange:

::selection {
  background-color: purple;
  color: orange;
}

Demo

See the Pen
PoNWRWp
by Michael Gearon (@michaelgearon)
on CodePen.

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.