If you’re like me, you’ve spent hours surfing the web looking for design inspiration. And if you have, then no doubt you’ve probably stumbled across the same websites of pristine designers who I pretty much think can do no wrong.
Once you’re there, highlight some of their text and you’ll see something you might not have seen before. Better yet, something you wish you had on your website.
I’m talking about the behavior and style of text selection, which is a part of CSS that most folks don’t know much about.
What is Text Selection?
By definition, the ::selection selector matches the portion of an element that is selected by a user.
In other words, when you select a portion of someone’s site content, you’ll see that the text is displayed as a highlight. By default, most browsers use a very light blue background color with no change to the font color.
What most folks don’t know is that through CSS, you can style the font color and background color.
How to Change the Default Text Selection Color
Now to the good stuff – only a few CSS properties can be applied to ::selection: color, background, cursor, and outline.
The ::selection selector is supported in IE9+, Opera, Google Chrome and Safari. Firefox supports an alternative, the ::-moz-selection.
So here’s how you would style the text selection in the second example above:
/* Body
------------------------------------------------------------ */
::-moz-selection {
background-color: #dd2020;
color: #fff;
}
::selection {
background-color: #dd2020;
color: #fff;
}Please note that because of browser quirks the CSS above will not work if the you try to combine the selectors as such:
/* Body
------------------------------------------------------------ */
::-moz-selection,
::selection {
background-color: #dd2020;
color: #fff;
}It’s really that simple. Go ahead and have some fun with CSS and styling the selected text on your website and tell me how it goes.
Some Really Nice Examples of Text Selection
1. Elliot Jay Stocks (view site)
2. Veerle Pieters (view site)
3. Natalie Jost (view site)
4. Jason Santa Maria (view site)
5. Janna Hagan (view site)
Great tip! Thanks!
Very cool! This isn’t something I ever would have thought of doing but now I have to go implement it right away…somewhere. I also like that your text-selection color is orange.
Yeah, it’s not one of those “obvious” design elements, but it’s more of a “cool factor” kind of thing.
This is really cool!
This doesn’t apply to my phone, which I use way too much for everything, but it would be fun to mess around with.
I think it would be neat if I matched up every aspect of color on my site, this included.
Thanks,
-Gabe
You know I never thought about doing that to my own site. Sounds fun.
Off to try it. 
Thank you!
Implemented.
Great little addition. Thanks for the tip!
Not heard of this selector.
Guess we just select text and don’t even think about how the selection is highlighted.
Notice you are a white text on orange background man – looks good.
Stored this away for future use.
I just launched a client site – I’m going to go add this to their site. Just a little touch o’ class. Thank you for sharing!
This is been great and I love the way how simply you have presented or implementing any changes. Its been great feature and will be using this in my upcoming work. Thank you for sharing
Very nice tip. Thank you Brian.
Nice Tip, Well I can see the effect in this blog, selection color is orange. Changing on my blogs too.
Super tip Brian, Thanks! Little enhancements like that make a big difference.
Hi Brian,
Thanks for this post, and for the many other good posts (tutorials).
I just switched to the Prose theme, from Generate. I noticed that the text selection colour that you created for the theme is quite nice.
I guess I’m gonna stick to that for some time. I may however try other options outlined here, in future.
Thanks again.
Hi Brian,
Any chance you will be releasing this theme anytime soon? It is awesome!! Thanks.
Josh
Learning CSS tricks is always fun. Thanks for this tip Brian.
Thanks. i was trying to Change the Default Text Selection Color but was failing so Google it and found your post. Indeed its helpful for me in real terms.
I never thought it was such easier. Thanks for the share
Thanks for the tip. Nice.
Great tip. I’ve seen this @wpbeginner and I liked the effect.
Now you know the trick, let’s put some quality content on our blogs so the readers would like to copy-paste the text and see the color of the selected text.
Applied to one of my blog. Thanks mate!
Regards,
Prerak.
hi,
nice tutorial. Do you use a plugin for the newsletter subscribe form above (just below the post content)?
If so, I’d appreciate the name and where to get it (even if it’s for sale). I’ve been looking for a customised newsletter subscribe plugin for my blog.
Regards
Thanks for the tip. I wish this were supported by more modern browsers. Reminds me of when developers were first able to style the vertical scrollbars in IE many years ago. Thanks!
Hi Brian,
I am using the Mindstream theme, is there a way to change the text size and color of only the “comments” link on a post? Thanks
Yes, there is – you’ll have to target it through CSS.