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.