How to Change Highlighted Text Color in WordPress (and Elementor)

If you want to customize the look of your website and enhance the user experience, one subtle yet effective tweak you can make is changing the color of the highlighted text.

This background color appears when visitors select text on your site. Whether you are using WordPress with the native Gutenberg editor, Elementor page builder, or any other page builder, this change is simple to implement using CSS.

This tutorial will show you how to change the background text color, as well as the font color, for the entire site or specific elements.

That will enable you to maintain consistency with your branding while also making your website more visually appealing to visitors who interact with your content.

Why Change the Highlighted Text Color?

In most cases, the default background color of the highlighted text is light blue, with black text. This is practical, but it might not align with your website’s color scheme or branding.

Customizing the highlight colors ensures that every detail of your site aligns and matches with your visual identity, resulting in a more polished and professional look.

Changing Highlighted Text Color Using CSS

You can change the highlighted text background color with CSS, explicitly targeting the ::selection pseudo-element. This CSS rule allows you to define the colors of the selected text.

Here is a simple CSS code that you can apply to switch the text color to white and the background color to blue when the text is highlighted.

::selection {
  background-color: blue;
  color: white;
}

Applying the rule to the selection will take effect for the entire website. Whenever any text is selected anywhere on your site, a white text on a blue background will be displayed.

You’ll need to change the color value in the CSS rule to your desired one.

Applying CSS in Elementor

If you’re using Elementor as your page builder, applying this CSS across the whole site is simple:

1. Open your WordPress dashboard and navigate to any page built with Elementor.
2. Click the Site Settings icon (usually a gear or hamburger menu icon in the Elementor panel).
3. Locate the Custom CSS section within Site Settings.
4. Paste the CSS rule  ::selection here.
5. Publish or update your changes.

After you publish your page, don’t forget to refresh your live site and then try selecting the text to see the newly changed color effect.

Targeting Specific Elements for Highlighted Text Colors

Sometimes, you may want to use different highlight colors for various sections of your site.

For example, you may want to have your H1 headings use a different highlight color than the body text.

You can do this by specifying the element before the ::selection pseudo-element in your CSS. Here’s how you can set the highlight for h1 differently from the body text:

::selection {
  background-color: blue;
  color: white;
}

h1::selection {
  background-color: red;
  color: green;
}

With this CSS, when you highlight body text, it shows white text on a blue background, but when you highlight a h1 heading, it shows green text on a red background.

Remember to add spaces between the elements and ::selection to target the selection within that element correctly.

Changing Highlight Colors Without Elementor

Suppose you’re not using Elementor and instead rely on the default WordPress editor or another page builder. In that case, you can still customize the highlighted text color by adding the same CSS code to your theme’s customizer:

1. From your WordPress dashboard, go to Appearance > Customize.
2. Click on the Additional CSS section.
3. Paste your ::selection CSS code here.
4. Publish the changes.

This method ensures that changes to your highlight color are applied consistently across the entire site, regardless of the page builder you use.

Tips for Customizing Highlighted Text Colors

• Choose contrasting colors: Ensure the text color and background color have sufficient contrast to ensure easy readability.
• Match your brand palette: Use colors that align with your branding for a consistent look.
• Test across browsers: Highlight colors may render slightly differently across various browsers, so it’s essential to test your site on multiple platforms.

Conclusion

Changing the background color of the highlighted text in WordPress and Elementor is a quick and effective way to improve your website’s design and user experience.

By using simple CSS targeting with a ::selection pseudo-element, you can change the highlight colors globally or on specific elements, such as headings.

This technique can be applied easily by everyone, regardless of whether they are a beginner or an experienced developer, and can substantially affect the way visitors perceive your site.

You can try the simple color customization yourself and witness the incredible change that it can bring to your website. 

Please comment below and share your custom highlight color ideas.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.