Skip to content

CSS Highlight Colour

When I design a website I really like to add small touches that most people won’t notice. In fact there’s a blog I follow that is dedicated to these small areas of delight. One of the things I like to change is the text css highlight colour.

The highlight colour can be changed really easily using css – however I always have to Google to get the syntax. When I Google it I always end up at Chris Coyiers site – however his post is dated 2008 and things have changed (a bit) since then.

In his demo he says that it only works with the background attribute – however this is no longer the case. I am now using the color attribute on this site, and it wouldn’t surprise me if other attributes worked as well.

CSS Highlight Colour Code

The code is super simple (obviously you can change the colours to whatever you like):

::-moz-selection {

Anything else?

Yes! Browser support has also improved since the original article 🙂

  • Chrome – 1
  • Firefox – 1.0 (requires -moz prefix)
  • Internet Explorer – 9
  • Opera – 9.5
  • Safar – 1.1

According to the Mozilla developer network the ::selection property has been removed from the css specification – so it shouldn’t be used. However, since adding it doesn’t break anything I see no harm in using it. If the browsers remove support then your website will not break – so let’s delight users with some groovy css highlight colours while we can.


Tips, Web Design

Ben View All

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

2 thoughts on “CSS Highlight Colour Leave a comment

  1. Pingback: CSS Highlight Colour
  2. Pingback: BlogBuzz December 1, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *