Hey friends, today we will see a cool but super simple CSS trick. We will learn how to change selection background using CSS. We will be using an easy selector pseudo element for this.

Do check out my video tutorial below for a better clarity:

Generally, you would want to customize this for the whole website. In that case, we need to just add the following code:

::selection {

  color:white;

  background:purple;

}

What this does is change the selection to like below:

You may also experiment different colors and background colors depending on how you like. If you want you can also style just the color or just the background. For example, look at the code below:

::selection {

  color:tomato;

}

This brings the output of below:

And that wraps up this quick blog post. Thanks for reading and I hope you enjoy using this useful selector in your projects to make it feel more nice and professional with your website theme. Till the next one, goodbye!