How to change text selection color with CSS

Oct 28, 2013
CSS
136 Shares
By

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.

Author: Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • DreamWorth1

    css is very important factor in site designing thanks for sharing such a nice post

  • Scott O’Hara

    i’ve been adding these selectors to my websites for awhile now. It’s such a little thing, but when i see people implement it on their website, it just shows they were thinking of every little detail to the experience. Hope it starts catching on more.

  • iNetGlobalSolutions

    Very informative and helpful information.

  • http://www.ebog.me/ ebog

    Its properties change really makes everything seem easier. I’m really looking forward to more of your CSS that bring out, what most new and exciting

  • shaunta85

    OOh9 Recently I used to be really, really lacking in money and debts were eating me from all angles! that was UNTIL I found out how to generate money.. on the INTERNET! I visited surveymoneymaker d-o-t net, and started doing surveys for cash, and really i’ve been greatly more able to do my things! i’m so happy, that I did this.. With all the financial stress these years, I really hope all of you will give it a chance. – Oi3y

  • Shinamee

    Coooool… thanks for sharing, using it for my new project.