You know what makes your website’s design stand out? Attention to details. One of these details that caught our attention on Brian Gardner’s (@bgardner) website was the way his default text selection color matched his design color scheme rather than being the default blue color. In this article, we will show you how to change the default text selection color in your WordPress theme.
Open your style.css file and add the following styles:
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}
Don’t forget to change the background color to match your theme’s color scheme.
The ::selection selector is used by Chrome, Safari, IE9+, and Opera. Firefox likes to use their own ::-moz-selection. This is the reason why they are on two separate lines. If you try to combine them, it will not work.
For demo, simply select any of the text on this site.
Source: Brian Gardner
Cool trick. I am working on a website in Genesis and like my tech support guy says, “it’s as easy as drinking a glass of water”
Thanks!
-David
Chris Coyier posted this on css-tricks.com back in 2009 http://css-tricks.com/snippets/css/change-text-selection-color/
Ah well, didn’t know about it until we saw it on Brian’s site.
Yes I saw it on Brian Gardner’s site.
Never knew you could change the selection colours until I read his article.
Not sure if I would ever use it, but nice to know it can be done.
This is one of those simple things that many people probably won’t notice, but it’s a nice “extra” to add to a website. I first saw it in HTML5 Boilerplate and use it frequently on sites that I build.
You actually can combine them, like this:
::selection,
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
We saw this tutorial on Brian’s site. He suggests that combining them will not work (not sure which environment it was not working). But we’d stick with what we know works.
Nice post. Just updated our site with a nice red background! Cheers!
genesis has a nice text selection color. your site’s is orange which is cool
p.s. speaking about site appearances, yoast.com got an upgrade too, he is also now using the genesis framework kudos to that!
Yup, Genesis is a very good framework to build your site on.