Change the Browser Default Selection Appearance

  • Tom Kenny

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.

Coming Soon...

The Learn from Great Design Volume 1 eBook


The bad news is it isn't ready yet but the good news is you can get three case studies for free, right now. Simply sign up and I will send it to you immediately. People subscribed to the email newsletter also get a discount on the book when it's released.

The book will contain 20 LFGD case studies (I spend at least 5 hours on each one) but there will be another version of the book with even more studies and at least 3 masterclasses, with even more in-depth studies of great design. One of them is the travel giant Airbnb.

Sign up below to get notified of the launch.

Free. No spam. Unsubscribe any time.