A quick and easy CSS3 technique to change the appearance of selected text which can bring a bit of extra personality and improve readability. It can also contribute to making your site more memorable. I first noticed this technique over at CSS-Tricks and it instantly became something I associated with the site.
::selection { background-color: #3fbaf4; color: #fff; }
::-moz-selection { background-color: #3fbaf4; color: #fff; }
You can also append the ::selection property to other elements. For example I’ve changed the text color of highlighted text contained within the <pre> tag:
pre::selection { color: #262626; }
pre::-moz-selection { color: #262626; }
Being a CSS3 property, ::selection only works with modern browsers and you won’t be surprised to hear that IE8, with it’s lack of CSS3 support, doesn’t support it. Here is how this looks on Inspect Element:
As you can see readability has been improved. It wasn’t at all bad in the default state but for something that takes very little time to implement it is certainly worth it.
Tweet
I also noticed this at CSS-Tricks.. thanks for the explanation!
This looks to be practical for usability.
How about that? I learned something new today. Just when you think you know a language…
That’s the great thing about working in the web design/development industry. We’re always looking at ways improve and do new and exciting things, so there’s always something to learn!
Hey Tom, I follow you on Twitter (which is how I got here) and enjoy many of your articles and comments. Great little tip, but I have a (most likely dumb) question: Why two colons in front of the selection property? My guess would be that it is there so it will be skipped by IE, but I’m probably way off.
That’s a great question Coby and something that I haven’t even thought about until now. I found some info over on W3′s CSS3 selectors page.