RxJS icon Launch Deal: Get $100 off the RxJS Kickstart Bundle now!

RxJS Masterclass is here. 2-course bundle - buy now (discount applied at checkout).

days
hours
mins
secs

Using CSS3 text-selection to override default highlight colour

Apr 9, 2012 1 min read

JavaScript post
JavaScript icon

Want to level up your JavaScript skills? Who doesn't. Here's what you need to know

Show Me View JavaScript courses

Add something different to your website by overriding the default text selection colour (boring blue and no text styling) when highlighting words/images on your website. Check out the demo below by highlighting the paragraphs, and add the code to your own website.

Note: Will not work in IE6-8, but you’re good on Safari/Chrome (WebKit), Mozilla FireFox (Gecko) and IE9+

Here’s the code to add to your CSS to implement your default text selection colour.

CSS (Global Colour Change)

/* IE9  - Also picked up by most modern browsers */
::selection {
  background:#AC2937;
  color:#FFF;
  text-shadow:none;
}

/* Safari & Chrome - Webkit Rendering */
::-webkit-selection {
  background:#AC2937;
  color:#FFF;
  text-shadow:none;
}

/* Mozilla based - Gecko Rendering */ 
::-moz-selection {
  background:#AC2937;
  color:#FFF;
  text-shadow:none;
}

HTML

If you want to highlight different paragraphs, you can target individual elements like so:

<!-- Green Paragraph -->
<p class="green-select">Your paragraph text here.</p>

CSS (Specific Area Colour Change)

/* Green Paragraph Custom Selection Colours */
.green-select::selection {
  background:#009E30;
  color:#FFF;
  text-shadow:none;
}

.green-select::-webkit-selection {
  background:#009E30;
  color:#FFF;
  text-shadow:none;
}

.green-select::-moz-selection {
  background:#009E30;
  color:#FFF;
  text-shadow:none;
}

Thanks for reading!

Love the post? Share it!

Lots of time and effort go into creating all our blogs, resources and demos, we'd love if you'd spare a moment to share this one!