The CSS3 ::selection pseudo-element is one of those things that were drafted into the CSS3 standard then somewhere down the road it was pulled out therefore it is not part of the official specification. Suffice to say that you can still use it in all browsers to change text selection should you want to do it.
Changing the selection colors on a website is probably one of the least done things across the board. Nevertheless, we will take a good look at how it works.
The CSS3 ::selection Selector supports four properties namely background, color, cursor, and outline. As with CSS properties, these are generally self-explanatory and they work in exactly the same way as all CSS properties.
This selector is basically used to match the portion of an HTML element that is selected by a user.
Here’s How to Change Text Selection by Example
The syntax is basically this:
::selection {
css declarations;
}The example in the link below changes the selected text to yellow and the background to blue… (No relation to the legacy Windows blue screen of death).
- Change Text Selection – CodePen
Notice for Firefox and the Mozilla family, we are using the browser-specific selector while the rest of the browsers do not need it. There you have it. You now know how to change text selection using CSS.
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.