CSS Quick Tip: Custom Text Selection Color

  • follow us in feedly
Published September 17, 2013 by Brad Knutson
CSS Quick Tip: Custom Text Selection Color

We often take for granted the background color and text color of highlighted text on our web pages. It’s nearly always a blue background with white text. But that is so boring…what if we wanted to change it? Guess what? You can!

I used this technique on a recent project of mine, which you can see in the screenshot below.

CSS Text Selection Color

With a simple snippet of CSS, you can override the browser default text selection background color and text color.

CSS

::selection {
	background: #94231B;
	color: #FFF;
	}
::-moz-selection {
	background: #94231B;
	color: #FFF;
}

The above CSS is supported by Chrome, Safari, Firefox, and IE9 and IE10.

You can set either the background color, text color, or both. If you set only one or the other, the browser will pick a contrasting color so that text can still be readable when highlighted. What I mean by this is that if you pick white for your background-color, the browser will either leave the default text color, or choose a readable color for you, and vice versa.

What about changing the text selection color for specific elements? We can do that too by qualifying which selector we want the new styles to apply to.

p::selection {
	background: #94231B;
	color: #FFF;
	}
div.maroon::selection {
	background: #94231B;
	color: #FFF;
}
div.highlight blockquote::selection {
	background: #94231B;
	color: #FFF;
}

You can come up with some really cool uses for this!

Is there an benefit of using this technique?

Well…no, but it’s cool! Most of your users won’t even notice the difference, but a few web savvy developers or designers might stumble across it, and you’ll get that approving grin you so desperately strive to achieve.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thought on “CSS Quick Tip: Custom Text Selection Color

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">