How to Change Background Color When Selecting Text in WordPress

by

Do you want to learn WordPress?In the premium area you have everything you need to learn from 0 WordPress

Video Tutorial

Subscribe to my channel:

In this little tutorial we are going to see how we can change the background color of the text when we select it with the mouse.

It is very possible that when selecting the text on a website you have been surprised when the background changes to a color other than the typical blue of all life.

background color when selected

how is it done? You will see that it is very easy thanks to CSS.

In this tutorial we will do it in WordPress but you can do it in any type of web page that uses CSS.

To do so we will use the pseudo-element ::selection css

You cannot use ::selection with any CSS property. The CSS properties that can use ::selection are:

  • Color
  • background
  • background-color
  • text-shadow

In our example we use it as follows:

p::selecction{
background:yellow;
}

To add the pseudo-element in WordPress we go to Customize –> custom css and voila, we have it 🙂

I have applied it to the paragraph but you can apply it to any other element.

Quick and easy, can you ask for more? 🙂

I hope you liked it

Leave a comment