Change the Browser Default Selection Appearance

by Tom Kenny (@tkenny)

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.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.