Using CSS3 text-selection to override default highlight colour

JavaScript Tagged in JavaScript Apr 9, 2012 1 min read by Todd Motto

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;
}
Angular Online Courses Angular shields
Ultimate Angular

Learn Angular the right way

Join my online courses to fully master Angular, TypeScript and NGRX.

Explore Courses Navigation arrow