HomeTutorsContact

How To Change The Highlight Color Of Selected Text In CSS?

By Gulshan Saini
Published in CSS
May 14, 2020
1 min read

In this short tutorial we are going to see, how to override the default text selection color with CSS. Text is said to be selected when, user clicks and drag the mouse across text. If you click and drag this text, browser will automatically add background color to it - in my case it is light blue as we can see in image below.

Default Selection Color Of Text
Default Selection Color Of Text

Introducing ::selection pseudo selector

Lets see how we can, change the default section color of blue to light green.

You can change the background color, color and text shadow of selected text by styling ::selection pseudo selector.

Now, when you try to click and drag text inside the blue box above, its going to be highlighted with light green background.

Hope you enjoyed this tutorial!


Tags

#css
Previous Article
How To Create Impressed & Embossed Effect In CSS?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?

June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media