How to Change Text Selection Background Color Using CSS , Set a Custom Text Highlight Color with CSS

Have you noticed that when you highlight text on some websites, the text's background color is unique and matches the site's color scheme? That's a little bit of CSS at work! If you can add custom CSS to your blog, you can set your own highlight color, too.

It's such a cute way to keep your color theme going through every aspect of your blog, and it's really easy to do with just the tiniest bit of very simple CSS.

I don’t know how much it contributes to the beauty of a website, but I really liked the idea of having a different background color for selected text. When a visitor on your website selects some text and background of selected text becomes deep orange or pink; it somehow gives a feeling of freshness. It feels like a welcome break from the usual blue color background for selected text.

Thankfully, Mozilla-based browsers (Firefox, Google Chrome and Safari) allow you to set CSS rules for changing this effect. Here is how you can accomplish this by setting -moz-selection and selection properties:

Code -

/* for Firefox */

::-moz-selection {

       background-color: deeppink;

       color: #fff​;

}

/* for Safari and Chrome */

::selection {

       background-color: deeppink;

       color: #fff​;

}

Using these CSS rules you can add to your website or blog’s appeal. When someone selects a piece of text and background color turns out to be more vibrant than the usually expected blue, visitor is bound to feel good about it.

I hope this tip was useful for you. Please comment and let me know if you have any questions or suggestions about it.