::selection – Change text selection color

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:
color
background-color
text-shadow
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. The browser support is good for this property (84.75%) being supported in all browsers apart from Safari on iOS with no prefix. If you are supporting Firefox version 61 or less then you will need to use the -moz-
prefix.Also there is a bug in Safari for Mac where if you are using the CSS multi-coloumn module the property will not work.
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 of different selections
[codepen_embed height=”600″ theme_id=”light” default_tab=”css,result” slug_hash=”PoNWRWp” user=”michaelgearon”]See the Pen
by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]
More CSS Guides

Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects