How to change text selection color with CSS

If your website has a lot of text, at some point or another people will more than likely want to select it to copy, or search on Google.

Changing the text selection color is always a nice touch, it shows that you’re paying attention to the finer details of the site.

Today I’m going to share a quick tip that will allow you to achieve some different looks for your selected text.

Browser support

The browser support for this selector is pretty good nowadays, it’s supported by all the latest versions of the most popular browsers and even Internet Explorer supports it in IE10, so you won’t run into any difficulties, especially as it will simply be ignored in any browser that doesn’t support it.

One thing to keep in mind is that this selector was in the drafts of CSS3 but it was later removed because its behavior was under-specified, especially within nested elements. 

The selector

The ::selection is the selector that allows you to apply rules to the portion of the document that has been highlighted by the user.

For example to change the background color using this selector we just need:

p.blue::selection  {
background: #1B6DE0;
}

The only problem with this statement is that Mozilla doesn’t support the prefix free version of this selector so if we want to also support Mozilla we need to add the -moz- prefix.

p.blue::selection  {
background: #1B6DE0;
}
p.blue-moz-::selection  {
background: #1B6DE0;
}

As you can see, the usage of this selector is really simple and it’s something you can start using today.

The properties 

So far we’ve only seen the background property change with this selector but there are more properties you can use to make the text stand out. You can change its color:

p.color::selection  {
color: #1B6DE0;
}
p.color::-moz-selection  {
color: #1B6DE0;
}

Or you might want to add a text shadow:

p.shadow::selection  {
text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
p.shadow::-moz-selection  {
text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

In this example the text gets a slight shadow. However, using the text-shadow by itself is likely to cause confusion, because the text changes so little and it will appear that the text hasn’t been selected. So make sure you use this property in conjunction with others.

And of course you can use all these three properties together to make even more impact on the page:

p.all::selection {
  color: white;
  background: grey;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
p.all::-moz-selection {
  color: white;
  background: grey;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

With all of these options at your disposal you can create some nice effects for your selected text giving it some more impact.

If you want to see some examples you can check out this pen I created.

Conclusion

The selection selector is a simple little add-on that you can plug into any webpage as  a final touch. It’s not a major addition to CSS3, but it’s a useful selector nonetheless.

Have you tried the selection selector? What other selectors in CSS3 are simple but beneficial? Let us know your thoughts in the comments.