CSS Highlight Colour

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):

::selection,
::-moz-selection {
	background:#693;
	color:#fff;
}

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.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Related Posts

01 Mar 2018

Website Colour Analyzer

In January I published Colour, a simple app that analyses the colours used in a website and suggests ways you can merge the colour to make the design simpler.I don’t know if it’s an age thing, or a generational thing,...
20 Mar 2013

Mastering the Psychology of Colour Theory in Web Design

As an aspiring or established blog writer, you will probably be thinking of how you can attract more readers to your blog. Of course, there are many ways to build a loyal audience, but one aspect which is often overlooked...
04 Jun 2007

5 Google Analytics things I would change

I really like Google Analytics. I use it pretty much exclusively for my website stat tracking, and the recent update is wonderful. However there are a few things I would like to change to improve it even more.In case you...
20 Feb 2014

Fixing CSS Transitions in Google Chrome

I had a weird problem yesterday where I had applied a css transition to an element that was fading from opacity:0.1 to opacity:1 – and along the way it seemed to change in size or position.The reason for the change...
25 Dec 2012

Learning to Accept CSS3: Creating CSS3 Windows

People are resistant to change. It’s strange since I consider myself quite forward thinking, but I still find it takes me a while to accept new things. I’ve been using CSS3 effects for quite a while now – as have...
13 Jul 2016

Why My WordPress Themes Site Doesn’t Use WordPress

I’ve mentioned it before but I run a WordPress themes site called Pro Theme Design. On it, I sell premium WordPress themes – but I don’t use WordPress to power the site.This probably seems like a strange thing to do...