Better Blogging: Dress Up Your Highlighted Text

If you’ve got the access to add some CSS to your site, why not make the colors used in text highlighting more fun than the boring ol’ default? Click on some text on this page and highlight it to see it in action right now.

Here’s how text selections look here on sarahblackstock.com:

Example of colorful text selection using CSS from sarablackstock.com
From this post on sarahblackstock.com.

And here’s an example of it on cookiepocket.org:

Example of colorful text selection using CSS from cookiepocket.org
From this post on cookiepocket.org.

Here’s the CSS to make it happen:

::selection {
	background: #d400aa;
	color: #fff;
}

/* Firefox */
::-moz-selection {
	background: #d400aa;
	color: #fff;
}

Notes:

  • Change the color hex code where you see #d400aa to the background/highlight color you want, and the #fff to the color you want the text to be. (#fff makes it white & #000 will make it black, but you can choose any color you want.)
  • Look in your site’s settings for the color hex codes used so you can make it match, browse for color ideas here, or use a tool like ColorZilla to get the hex code for any color you see on your screen.
  • It might not work everywhere, due to browser differences, but this handles Chrome, Firefox, and Safari for me.
  • If you’re a WordPress.com user (like me!) with a Premium or Business Upgrade, you can add this CSS under Customize > CSS. Paste in the code above, edit the colors, and save.

Happy highlighting! 🙂

Posted by

Introvert who likes to talk. Feminist & Texan. Romance novel enthusiast. Happiness Engineer at Automattic for WordPress.com.