How To Change The Text Selection Color of Your Text With CSS

How To Change The Text Selection Color of Your Text With CSS

Emily Wang
Emily Wang
June 07, 2019

One thing that a lot of top end designers are doing at the moment is altering the behavior of the text selection style, which is a CSS feature that hasn’t been stumbled across by a lot of people.

Firstly, what is this feature?

When you go to a website and select or highlight a portion of the text on that page by clicking down on the right mouse button and dragging over the text you will see that the text is usually highlighted in blue.

A lot of you reading this won’t actually know anything about this CSS feature, so we are going to draw some light on the benefits of using the style text selection to help bring your website to life in a unique way and to heighten your design skills and senses.

In CSS this feature is known as ::selection and can be seen in action in the image below. You will notice that both images in this post have different variations of background color as well as text color.

How To Change The Text Selection Color of Your Text With CSS

The great thing about this style is that you can change not just the background highlighting but also the text color to anything that you want. So for webmasters who want to get their sites a little more color-coded then this hidden option can help take your site to the next level.

For other designers and webmasters this quirky little style can just be used to show off your knowledge of CSS and impress a few people!

What is really brilliant about this style is that it’s simple to implement into your CSS, as it’s just a small piece of code that needs to be added.

::selection {

    background-color: #dd2020;

    color: #fff;


So now you can play around with this feature and see what works best for you.

30 claps
Clap for the post if you found it useful!

Any comments?

0 out of minimum 100 characters
Required Field Maximal length of comment is equal 80000 chars Minimal length of comment is equal 100 chars

Get just one email a month and take your skills to the next level.

Sign up Now!

We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.

Share this blog post with friends and co-workers right now:

We check all comments within 48 hours to make sure they're from real users like you. In the meantime, you can share your comment with others to let more people know what you think.

Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!

So happy you liked it!

Share it with your friends!

© 2019 All Rights Reserved.