How to Change the Default Text Selection

How to Change the Default Text Selection

A lot of copying and pasting of text happens on webpages and if you want yours to be different then you need to customise how the text looks when it’s been highlighted. This can be changed to match the look of your website.

This heading has the default text selection before custom CSS is added. Select it to check!

Simply add the following code. If you don’t know where to put the code check out this tutorial.


::selection {
  color: #ffc0cb;
  background: #82317d;
}

Just change the values to suit your requirements.

This heading has text selection with custom CSS. Again, try it to check!

That’s all folks. Job done! Let us know of any issues or successes in the comments. We love to hear from you!

***Check caniuse.com for browser support***

Disclaimer - Divi is a registered trademark of Elegant Themes, Inc. This website isn't affiliated with or endorsed by Elegant Themes.
To enable us to keep some of the content on this site free, we might receive an affiliate commission if you click through and purchase products we advertise/recommend. You will never be charged more for this.