Using CSS ::selection selector, you can change the default text selection color on a web page.

Here’s a demo.

Try selecting me.

Try selecting me. I’ll have a different color.

Changing the text selection color

HTML Markup

<p class="cust1">Select me.</p>
<p class="cust2">Select me too</p>
<p>I will have the default color specified for all elements</p>


::selection {
/changing default color/
color: white;
background: green;
.cust1::selection {
color: red;
background: grey;
.cust2::selection {
color: white;
background: teal;

Try yourself

See the Pen Changing selection color with css by Mishel Shaji (@mishelshaji) on CodePen.