How to change the text selection color using CSS

HTML CSS

How to change the text selection color using CSS

Mishel Shaji

Oct 23, 2018

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.