Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Change the Default Text Selection Color in WordPress

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.

How to Change the Default Text Selection Color in WordPress

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. In this way, you can boost your site’s appeal so visitors stay for longer, which will increase your pageviews and reduce your bounce rates.

One detail that’s often overlooked is the highlight color of selected text. The default color won’t look good on every website.

Your WordPress theme may give you the option to change this color, but most don’t. If yours does not, then you can change the text selection color using a plugin or a code snippet.

With that being said, let’s see how you can change the default text selection color in WordPress. Simply use the links below to jump to the method you want to use.

Method 1: Using a Plugin to Change Text Selection Color (Recommended)

The easiest way to change the default text selection color in WordPress is by using Custom Highlight Color. This plugin allows you to select a custom text selection color, but the result may not look exactly the same on all web browsers.

If you’re not happy with the result after testing your website in different browsers, then we recommend using method 2 instead.

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.

Upon activation, head over to Appearance » Customize on your WordPress dashboard. Then, select the ‘Colors’ tab.

Changing the default text highlight color in WordPress

Under ‘Highlight Color,’ use the color picker to choose a new default text selection color.

Another option is to type in the hex code that you want to use.

A custom text highlight color in WordPress

When you’re happy with the new text selection color, you can click on Publish to make this change live.

After that, it’s smart to look at your WordPress blog in a few different browsers to make sure you’re happy with the new text selection color. If you don’t like how it looks, then you can always try a different color or move on to method 2.

Method 2: Using Code to Change Text Selection Color

The second method uses a CSS code snippet. 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.

To start, head over to Appearance » Customize in your WordPress dashboard. Once there, you need to click on Additional CSS at the bottom of the list.

Changing the default text color in WordPress using CSS

Now, simply copy and paste the following styles into the small code editor:

::-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.

Adding custom CSS code to your WordPress website

For background-color we’re using hex codes, which you’ll need to replace with the color you want to use. If you’re not sure what code to use, then you can explore different colors and get their codes using the HTML Color Codes website.

Once you’e changed the background-color values in the code snippet above, click the Publish button at the top of the screen.

You can now visit your website to see the change in action.

A custom text selection color in WordPress

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 create a contact form in WordPress and check out our list of the best WordPress drag and drop page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

24 CommentsLeave a Reply

  1. 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.

  2. Thanks, it worked great for me in a Twenty Fourteen Child. Hopefully that is the last of the default green gone from template

  3. 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.

      Admin

      • 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!!!!!

  4. 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

  5. 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.

    • 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.

      Admin

  6. 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!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.