Do you want to change the default text selection color in WordPress?
You can make your WordPress site stand out by paying attention to the small details, such as having the text selection color match your site’s color scheme.
In this article, we will show you how to change the default text selection color in your WordPress theme.
Why Change the Default Text Selection Color?
Colors are an important part of your brand image, so you should spend time choosing the perfect color scheme. It will boost the appeal of your site so your visitors stay longer, boosting your sales and conversions.
One detail that is often forgotten is the highlight color given to selected text. The default color won’t look good on every website.
Your WordPress theme may give you the option of changing this color, but most do not. If yours doesn’t, then you can change your theme’s text selection color using a plugin or a code snippet.
Only one method is necessary, and most users will find it simplest to use a plugin. You can use the links below to jump to your preferred method.
- Method 1: Using a Plugin to Change Text Selection Color
- Method 2: Using Code to Change Text Selection Color
Method 1: Using a Plugin to Change Text Selection Color
Custom Highlight Color is a WordPress plugin that allows you to select a custom text selection color. This is the simplest method, but the result may not look exactly the same on all web browsers.
The first thing you’ll need to do is install and activate the Custom Highlight Color plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Once installed, you should navigate to Appearance » Customize on your WordPress dashboard. Then you need to select Colors from the menu.
You’ll need to click on the Highlight Color to type in the desired color hex code or use the color picker. Then simply click the Publish button to activate the new highlight color.
Method 2: Using Code to Change Text Selection Color
The second method uses a CSS code snippet. This can be tricky for beginners, and making a mistake could break your WordPress website .
If you’re new to using code snippets, then you might like to check our guide on how to easily add custom CSS to your WordPress site. In this tutorial, we’ll use the Theme Customizer.
The first thing you need to do is navigate to Appearance » Customize in your WordPress dashboard. Once there, you need to click on Additional CSS at the bottom of the list.
Next, you simply copy and paste the following styles.
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}
Notice that we added two styles. The ::moz-selection CSS selector works with the Firefox browser, and the ::selection CSS selector works with other popular browsers such as Chrome, Safari, IE9+, and Opera.
Don’t forget to change the background color to match your theme’s color scheme. When finished, click the Publish button at the top of the screen.
You can now navigate to your website to see the change in action. Here are before and after screenshots from our test website.
We hope this tutorial helped you learn how to change the default text selection color in WordPress.
You may also want to see how our guide on how to choose the best web design software and check out our list of the best WordPress drag and drop page builder plugins.
If you liked this guide, then please consider subscribing to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Thank you so much for your post ! Clear and useful.
Glad you found our content helpful
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.