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.
Compatibility Note
This works in Firefox, Chrome, Safari, and the latest version of Internet Explorer. But, it doesn't work on older versions of Internet Explorer, mobile browsers, or on the iPad. Think of this effect as a little "nice-to-have" decorative detail. Your readers who can see it will admire your impeccable style, and your readers who can't won't feel left out.
Demo
Here's a screenshot of what a custom highlight color can look like, for my RSS & mobile readers:
If you're here on the blog with a "desktop" browser, highlight any of the text in this post with your cursor. You should see the text turn white and appear on a raspberry background.
The CSS
You can create the same effect for your blog using this CSS snippet. Add it wherever you put custom CSS in your blogging platform (in Blogger, it's under Template > Customize > Advanced > Add CSS. In Typepad, it's under Design > Custom CSS. In Tumblr, it's under Customize > Advanced > Add CSS. In self-hosted Wordpress it varies by theme):
::-moz-selection {
background-color: #BA9EB0;
color: #ffffff;
}
::selection {
background-color: #BA9EB0;
color: #ffffff;
}
That will give you white text on a purple background. You can test it out with these colors just to make sure it works. Then, customize the colors!
To change the colors, simply edit the color codes to suit your theme. The "background" rule sets the background color, and the "color" rule sets the text color.
When you change colors, make sure to change them in both snippets. The "-moz-selection" one is for Firefox, and the "selection" one is for all other compatible browsers.
Also, make sure to choose colors with good contrast to keep your text legible while it's highlighted. You want it to be colorful, not confusing :)
That's all you have to do! Just add the CSS snippet, pop in your own color codes, and you'll have custom colors for your highlighted text.
Getting Your Color Codes
If you don't know the hex number color code for your colors, you can use Colorpicker.com to find them. Or, you can pick your colors using an online "eyedropper" tool, like Colorzilla. Eyedroppers for selecting colors are also in Photoshop and other image editing software.
