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.
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.