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 for browser support***