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.

p::selection {
  background: #bada55;

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!


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

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer



Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media