Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Change the Default Text Selection Color in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to change the default text selection color in WordPress?

At times, you may want the default text section color to contrast more with the background color. This way, users can see exactly what’s being highlighted in the content.

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 in WordPress?

Text selection color refers to the color that shows up when you highlight a piece of text within a content. Like this:

An example of the default text selection color in WordPress

In some cases, you may want to change this color because it doesn’t look well with your WordPress website design. Color scheme plays an important role in making your site look good and keeping a consistent brand experience.

If you run a WordPress blog, then you may also want to change the default text selection color if you think it doesn’t stand out enough from the rest of the content, making it hard to read.

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 the WordPress Theme Settings (Easy)

Some WordPress themes allow you to change the default text selection color. To check whether this is the case for your theme, you need to go to Appearance » Customize.

Note: If you are using a block theme, then you won’t have this menu option. Instead, you can read our guide on how to use Full Site Editing in WordPress.

Opening the WordPress theme customizer

Here, look for any settings labeled ‘Colors’.

If you see a ‘General’, ‘Global’, or similar tab, then this often contains the theme’s color settings.

For example, if you are using the popular Astra WordPress theme, then you will need to select the ‘Global’ tab.

Changing the default text selection color using the theme settings

After that, click ‘Colors’ to see all the different colors that make up this responsive WordPress theme.

Next, you must click on ‘Accent’.

Changing the accent color in the WordPress theme settings

This opens a color picker where you can choose a new text selection color.

As you make changes, the live preview will update automatically. So, you can try different settings to see what looks the best for your WordPress website.

Changing the text selection color using the WordPress Theme Customizer

When you are happy with your changes, just click ‘Publish’ to make them live.

After that, you will see the new text selection color live on your WordPress blog or website.

Changing the text highlight color in WordPress

Even if you don’t see any color settings in the WordPress theme customizer, it’s still worth checking your theme’s documentation to see if there is a way to change the default text selection color.

You can even reach out to the theme’s developer for help. For more information, please see our guide on how to properly ask for WordPress support and get it.

Method 2: Using Code to Change Text Selection Color (Works With All Themes)

If you can’t see a way to change the text selection color in the theme customizer, then another option is to use CSS code.

Often, you will find CSS code snippets in WordPress tutorials with instructions to add them to your theme’s functions.php file.

The biggest problem is that even a tiny mistake in the code snippet can completely break your WordPress site. Not to mention, you will lose all your custom code when you update the WordPress theme.

That’s where WPCode comes in. This code snippets plugin makes it easy to add custom code to WordPress without causing any errors or making your site inaccessible.

WPCode - Best WordPress Code Snippets Plugin

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head to Code Snippets » Add Snippet in your WordPress admin dashboard.

Changing the text selection color using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code’.

When it appears, click on the ‘Use snippet’ button.

Adding custom code snippets to WordPress using WPCode

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard later, like ‘Change text selection color.’

After that, you need to open the ‘Code Type’ dropdown and select ‘CSS Snippet’.

Changing the WordPress text selection color using code

You can then add the following CSS into the Code Preview box:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    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 like Google Chrome, Safari, IE9+, and Opera.

In the above example, the # hex code will change the link color to green, so you will need to change background-color: #008000 to the color you want to use for the highlighted text.

If you are not sure what hex code to use, then you can explore different colors and get their codes on the HTML Color Codes website.

When you are happy with how your code looks, just click on the ‘Inactive’ toggle to show ‘Active’ instead.

Then, click on ‘Save Snippet’ to make the CSS snippet live.

Inserting the default text selection color CSS code in WPCode

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

This is how it looked on our demo website.

Example of the new default text selection color, created with WPCode

For more information about customizing colors in WordPress, check out the following guides:

We hope this tutorial helped you learn how to change the default text selection color in WordPress. You may also want to see our guide on how to create a contact form in WordPress and 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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

25 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Lynne Clay says

    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.

  3. Adrian Wallis says

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

  4. Marvin says

    Hello there,

    I just copied your code in my Genesis eleven40 child theme but it is not working.

    Thank You

    • Editorial Staff says

      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.


      • Lauren says

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

  5. David Abramson says

    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”


  6. Josh McCarty says

    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.

    • Editorial Staff says

      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.


  7. Gautam Doddamani says

    genesis has a nice text selection color. your site’s is orange which is cool :)

    p.s. speaking about site appearances, 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.