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
Is there a way to change just my posts titles color without having to change the coding? I don’t understand anything about coding and don’t want to mess with that anyway.
While it requires coding, if you wanted customizations without needing to understand the code you could look into a plugin such as CSS Hero which we have reviewed here:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
Thanks for this awesome post.
You’re welcome
Thank you very much, your service was excellent. Lot to learn from you.
Glad our tutorial was helpful
Thanks, it worked great for me in a Twenty Fourteen Child. Hopefully that is the last of the default green gone from template
I tried this but it didn’t work… I’m using Thesis, does that make a difference?
Not that we know of because it is a basic CSS change. The only thing we can think of is that thesis is overriding your styles maybe?
Hello there,
I just copied your code in my Genesis eleven40 child theme but it is not working.
Thank You
It should work just fine unless eleven40 has it’s own styles pre-defined. In which case you would need to override them by adding an !important value in yours.
Oh my gosh. I have been searching tirelessly all over the internet for the solution to this problem, but to no avail. But this response to Marvin’s question solved it! So simple. Thanks so much!!!!!
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.