Changing the color of text when they highlight with CSS

I wrote this little tid-bit down a while ago, and I snagged it from Chris over at css-tricks.com. He has no idea who I am, but I’d like to think if he did, we would be on a first name basis.

Anyway, you can change the color of the highlight that shows when people select text on your site with this little bit of CSS:

::selection {
        background: #ffb7b7; /* Safari */
        }
::-moz-selection {
        background: #ffb7b7; /* Firefox */
}

If you wanted different colors depending on the paragraph they were selecting in, you would add a class to the tag and write the style like this:

p.className1::selection {
	background: #ff0000;
}
p.className2::-moz-selection {
	background: #ff0000;
}

Nice little bit of customization. Unfortunately it only works in Safari and Firefox, but try it out anyway. Its cool.

Tags:

This entry was posted on Tuesday, March 9th, 2010 at 9:38 pm and is filed under CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply