Home > Tips & Tricks > Change Text Selection Color with CSS

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 😉

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment