How to change the text selection color using CSS
HTML CSS

How to change the text selection color using CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

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

Try selecting me.

Try selecting me. I'll have a different 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>

Add CSS

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

Run the code

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