Change Text Selection Color with CSS

Hi Guys in this trick, I will show you how you can change the text selection color with CSS style. We will use the pseudo-element selector to target the element.

The pseudo-elements are basically used to style the special part of the element like you can style the first character, the first line, insert content after or before elements, and of course selection, etc.

Test selection means that when you select the element from document. And you can copy that text and paste it anywhere. So let’s see the trick to change the text selection color of elements with CSS.

You just have to add the above CSS line in your stylesheet, and you can change the color of it as you want it. It will target the whole body elements.

But if you want to target specific elements then you can specify that selector with the ::selection pseudo-element.

The above code only changes the selection color for paragraph (<p>) element. That’s it!!!

See the Pen
Change Text Selection Color with CSS
by Ama Mehra (@amanmehra)
on CodePen.

Being Tricky 😉

Leave a Reply

Your email address will not be published. Required fields are marked *